{"option":{"properties":{"title":{"properties":{"id":{"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":{"description":"<p>It specifies whether to show the title component.</p>\n"},"text":{"description":"<p>The main title text, supporting for <code>\\n</code> for newlines.</p>\n"},"link":{"description":"<p>The hyper link of main title text.</p>\n"},"target":{"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>&#39;self&#39;</code> opening it in current tab</p>\n</li>\n<li><p><code>&#39;blank&#39;</code> opening it in a new tab</p>\n</li>\n</ul>\n"},"textStyle":{"properties":{"color":{"description":"<p>main title text color.</p>\n"},"fontStyle":{"description":"<p>main title font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>main title font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>main title font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>main title font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"subtext":{"description":"<p>Subtitle text, supporting for <code>\\n</code> for newlines.</p>\n"},"sublink":{"description":"<p>The hyper link of subtitle text.</p>\n"},"subtarget":{"description":"<p> Open the hyper link of subtitle in specified tab, options:</p>\n<ul>\n<li><p><code>&#39;self&#39;</code> opening it in current tab</p>\n</li>\n<li><p><code>&#39;blank&#39;</code> opening it in a new tab</p>\n</li>\n</ul>\n"},"subtextStyle":{"properties":{"color":{"description":"<p>subtitle text color.</p>\n"},"fontStyle":{"description":"<p>subtitle font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>subtitle font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>subtitle font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>subtitle font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"padding":{"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"},"itemGap":{"description":"<p>The gap between the main title and subtitle.</p>\n"},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"backgroundColor":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>.</p>\n</blockquote>\n"},"borderColor":{"description":"<p>Border color of title. Support the same color format as backgroundColor.</p>\n"},"borderWidth":{"description":"<p>Border width of title.</p>\n"},"borderRadius":{"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>"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\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":{"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":{"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"},"shadowOffsetY":{"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"}}},"legend":{"properties":{"type":{"description":"<p>Type of legend. Optional values:</p>\n<ul>\n<li><code>&#39;plain&#39;</code>: Simple legend. (default)</li>\n<li><code>&#39;scroll&#39;</code>: Scrollable legend. It helps when too many legend items needed to be shown.</li>\n</ul>\n<p>See <a href=\"http://echarts.baidu.com/gallery/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"http://echarts.baidu.com/gallery/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n<p>When <code>&#39;scroll&#39;</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":{"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":{"description":""},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"width":{"description":"<p>Width of legend component. Adaptive by default.</p>\n"},"height":{"description":"<p>Height of legend component. Adaptive by default.</p>\n"},"orient":{"description":"<p>The layout orientation of legend.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n"},"align":{"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 &#39;right&#39;, and the vertical layout (<a href=\"#legend.orient\">orient</a> is &#39;vertical&#39;), it would be aligned to &#39;right&#39;.</p>\n<p>Option:</p>\n<ul>\n<li>&#39;auto&#39;</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n</ul>\n"},"padding":{"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"},"itemGap":{"description":"<p>The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.</p>\n"},"itemWidth":{"description":"<p>Image width of legend symbol.</p>\n"},"itemHeight":{"description":"<p>Image height of legend symbol.</p>\n"},"symbolKeepAspect":{"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"},"formatter":{"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: &#39;Legend {name}&#39;\n// using callback function\nformatter: function (name) {\n    return &#39;Legend &#39; + name;\n}\n</code></pre>\n"},"selectedMode":{"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>&#39;single&#39;</code> or <code>&#39;multiple&#39;</code>, for single selection and multiple selection.</p>\n"},"inactiveColor":{"description":"<p>Legend color when not selected.</p>\n"},"selected":{"description":"<p>State table of selected legend.</p>\n<p>example:</p>\n<pre><code>selected: {\n    // selected&#39;series 1&#39;\n    &#39;series 1&#39;: true,\n    // unselected&#39;series 2&#39;\n    &#39;series 2&#39;: false\n}\n</code></pre>"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"tooltip":{"description":"<p>Tooltip configuration for legend tooltip, which is similar to <a href=\"http://localhost/echarts-doc/public/option.html#tooltip\" target=\"_blank\">tooltip</a>.</p>\n"},"data":{"items":{"properties":{"name":{"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":{"description":"<p>Icon of the legend.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"textStyle":{"description":"<p>Text style of legend.</p>\n"}}}},"backgroundColor":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>.</p>\n</blockquote>\n"},"borderColor":{"description":"<p>Border color of legend. Support the same color format as backgroundColor.</p>\n"},"borderWidth":{"description":"<p>Border width of legend.</p>\n"},"borderRadius":{"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>"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\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":{"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":{"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"},"shadowOffsetY":{"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"},"scrollDataIndex":{"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>&#39;scroll&#39;</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=\"http://echarts.baidu.com/gallery/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"http://echarts.baidu.com/gallery/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageButtonItemGap":{"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>&#39;scroll&#39;</code>.</p>\n<p>The gap between page buttons and page info text.</p>\n<p>See <a href=\"http://echarts.baidu.com/gallery/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"http://echarts.baidu.com/gallery/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageButtonGap":{"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>&#39;scroll&#39;</code>.</p>\n<p>The gap between page buttons and legend items.</p>\n<p>See <a href=\"http://echarts.baidu.com/gallery/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"http://echarts.baidu.com/gallery/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageButtonPosition":{"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>&#39;scroll&#39;</code>.</p>\n<p>The position of page buttons and page info. Optional values:</p>\n<ul>\n<li><code>&#39;start&#39;</code>: on the left or top.</li>\n<li><code>&#39;end&#39;</code>: on the right or bottom.</li>\n</ul>\n<p>See <a href=\"http://echarts.baidu.com/gallery/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"http://echarts.baidu.com/gallery/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageFormatter":{"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>&#39;scroll&#39;</code>.</p>\n<p>Page info formatter. It is <code>&#39;{current}/{total}&#39;</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=\"http://echarts.baidu.com/gallery/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"http://echarts.baidu.com/gallery/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageIcons":{"properties":{"horizontal":{"description":"<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code>&#39;horizontal&#39;</code>.</p>\n<p>It should be an array, <code>[previous page button, next page button]</code>, <code>[&#39;M0,0L12,-10L12,10z&#39;, &#39;M0,0L-12,-10L-12,10z&#39;]</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>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>See <a href=\"http://echarts.baidu.com/gallery/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"http://echarts.baidu.com/gallery/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"vertical":{"description":"<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code>&#39;vertical&#39;</code>.</p>\n<p>It should be an array, <code>[previous page button, next page button]</code>, <code>[&#39;M0,0L20,0L10,-20z&#39;, &#39;M0,0L20,0L10,20z&#39;]</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>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>See <a href=\"http://echarts.baidu.com/gallery/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"http://echarts.baidu.com/gallery/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"}}},"pageIconColor":{"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>&#39;scroll&#39;</code>.</p>\n<p>The color of page buttons.</p>\n<p>See <a href=\"http://echarts.baidu.com/gallery/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"http://echarts.baidu.com/gallery/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageIconInactiveColor":{"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>&#39;scroll&#39;</code>.</p>\n<p>The color of page buttons when they are inactive.</p>\n<p>See <a href=\"http://echarts.baidu.com/gallery/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"http://echarts.baidu.com/gallery/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageIconSize":{"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>&#39;scroll&#39;</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=\"http://echarts.baidu.com/gallery/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"http://echarts.baidu.com/gallery/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageTextStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"animation":{"description":"<p>Whether to use animation when page scrolll.</p>\n"},"animationDurationUpdate":{"description":"<p>Duration of the page scroll animation.</p>\n"}}},"grid":{"properties":{"id":{"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":{"description":"<p>Whether to show the grid in rectangular coordinate.</p>\n"},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n"},"width":{"description":"<p>Width of grid  component. Adaptive by default.</p>\n"},"height":{"description":"<p>Height of grid  component. Adaptive by default.</p>\n"},"containLabel":{"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 helps when multiple gris need to be align 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 is not only contains axes but also contains labels of those axes.</li>\n<li>Setting to <code>true</code> will helps when the length of axis labels is dynamic and is hard to approximate to avoid them overflowing the container or overlapping other components.</li>\n</ul>\n</li>\n</ul>\n"},"backgroundColor":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>.</p>\n</blockquote>\n<p><strong>Attention</strong>: Works only if <code>show: true</code> is set.</p>\n"},"borderColor":{"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"},"borderWidth":{"description":"<p>Border width of grid.</p>\n<p><strong>Attention</strong>: Works only if <code>show: true</code> is set.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\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":{"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":{"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"},"shadowOffsetY":{"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"},"tooltip":{"properties":{"show":{"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n"},"trigger":{"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code>&#39;axis&#39;</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>&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n"},"axisPointer":{"properties":{"type":{"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> line indicator</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> shadow crosshair indicator</p>\n</li>\n<li><p><code>&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n"},"axis":{"description":"<p>The coordinate axis, which could be <code>&#39;x&#39;</code>, <code>&#39;y&#39;</code>, <code>&#39;radius&#39;</code>, or <code>&#39;angle&#39;</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"},"snap":{"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":{"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":{"properties":{"show":{"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>&#39;cross&#39;</code>, label will be displayed automatically.</p>\n"},"precision":{"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n"},"formatter":{"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: &#39;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>&#39;category&#39;</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\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 &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"},"margin":{"description":"<p>Distance between label and axis.</p>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"},"borderColor":{"description":"<p>Border color of label.</p>\n"},"borderWidth":{"description":"<p>Border width of label.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"position":{"description":"<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"xAxis":{"properties":{"id":{"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":{"description":"<p>If show x axis.</p>\n"},"gridIndex":{"description":"<p>The index of grid which the x axis belongs to. Defaults to be in the first grid.</p>\n"},"position":{"description":"<p>The position of x axis.</p>\n<p>options:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;bottom&#39;</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":{"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"},"type":{"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>&#39;category&#39;</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>&#39;time&#39;</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>&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n"},"name":{"description":"<p>Name of axis.</p>\n"},"nameLocation":{"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code> or <code>&#39;center&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"nameTextStyle":{"properties":{"color":{"description":"<p>Color of axis name uses <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>axis name font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>axis name font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"nameGap":{"description":"<p>Gap between axis name and axis line.</p>\n"},"nameRotate":{"description":"<p>Rotation of axis name.</p>\n"},"inverse":{"description":"<p>Whether axis is inversed. New option from ECharts 3.</p>\n"},"boundaryGap":{"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: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMin&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"max":{"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMax&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"scale":{"description":"<p>It is available only in numerical axis, i.e., <a href=\"#xAxis.type\">type</a>: &#39;value&#39;.</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"},"splitNumber":{"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"},"minInterval":{"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#xAxis.type\">type</a> is &#39;time&#39;), 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> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"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>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#xAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#xAxis.type\">type</a>: &#39;log&#39;.</p>\n"},"silent":{"description":"<p>True for axis that cannot be interacted with.</p>\n"},"triggerEvent":{"description":"<p>Whether the labels of axis triggers and reacts to mouse events.</p>\n<p>Parameters of event includes:</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: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n"},"axisLine":{"properties":{"show":{"description":"<p>Whether to show the axis line or not.</p>\n"},"onZero":{"description":"<p>Specifies whether X or Y axis lies on the other&#39;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"},"onZeroAxisIndex":{"description":"<p>When mutiple axes exists, this option can be used to specify which axis can be &quot;onZero&quot; to.</p>\n"},"symbol":{"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&#39;s set to be <code>&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code>&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n"},"symbolSize":{"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"},"symbolOffset":{"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"},"lineStyle":{"properties":{"color":{"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p>line style line width.</p>\n"},"type":{"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the axis tick.</p>\n"},"alignWithLabel":{"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"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"length":{"description":"<p>The length of the axis tick.</p>\n"},"lineStyle":{"properties":{"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":{"description":"<p>axisTick line width.</p>\n"},"type":{"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the label of axis label or not.</p>\n"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"rotate":{"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"},"margin":{"description":"<p>The margin between the axis label and the axis line.</p>\n"},"formatter":{"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: &#39;{value} kg&#39;\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(&#39;/&#39;);\n}\n</code></pre>\n"},"showMinLabel":{"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"},"showMaxLabel":{"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"},"color":{"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) =&gt; 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 &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"splitLine":{"properties":{"show":{"description":"<p>Whether to show the splitLine. Value axes are shown by default, while category axes are not.</p>\n"},"interval":{"description":""},"lineStyle":{"properties":{"color":{"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: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>"},"width":{"description":"<p>splitLine line width.</p>\n"},"type":{"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"interval":{"description":""},"show":{"description":"<p>Whether to show the splitArea.</p>\n"},"areaStyle":{"properties":{"color":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"value":{"description":"<p>Name of a category.</p>\n"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}},"axisPointer":{"properties":{"show":{"description":"<p>axisPointer will not be displayed by default. But if<a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code>&#39;cross&#39;</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"},"type":{"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> line indicator</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> shadow crosshair indicator</p>\n</li>\n</ul>\n"},"snap":{"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":{"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":{"properties":{"show":{"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>&#39;cross&#39;</code>, label will be displayed automatically.</p>\n"},"precision":{"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n"},"formatter":{"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: &#39;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>&#39;category&#39;</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\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 &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"},"margin":{"description":"<p>Distance between label and axis.</p>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"},"borderColor":{"description":"<p>Border color of label.</p>\n"},"borderWidth":{"description":"<p>Border width of label.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Whether to trigger tooltip.</p>\n"},"value":{"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"},"status":{"description":"<p>Current status, can be <code>&#39;show&#39;</code> 和 <code>&#39;hide&#39;</code>.</p>\n"},"handle":{"properties":{"show":{"description":"<p>Set to <code>true</code> to use handle.</p>\n"},"icon":{"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>See the <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n"},"margin":{"description":"<p>Distance from handle center to axis.</p>\n"},"color":{"description":"<p>The color of the handle.</p>\n"},"throttle":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"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) =&gt; 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"}}}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"}}},"yAxis":{"properties":{"id":{"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":{"description":"<p>If show y axis.</p>\n"},"gridIndex":{"description":"<p>The index of grid which the y axis belongs to. Defaults to be in the first grid.</p>\n"},"position":{"description":"<p>the position of y axis.</p>\n<p>options:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>The first y axis in grid defaults to be the left (<code>&#39;left&#39;</code>)  of the grid, and the second y axis is on the other side against the first y axis.</p>\n"},"offset":{"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"},"type":{"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>&#39;category&#39;</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>&#39;time&#39;</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>&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n"},"name":{"description":"<p>Name of axis.</p>\n"},"nameLocation":{"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code> or <code>&#39;center&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"nameTextStyle":{"properties":{"color":{"description":"<p>Color of axis name uses <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>axis name font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>axis name font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"nameGap":{"description":"<p>Gap between axis name and axis line.</p>\n"},"nameRotate":{"description":"<p>Rotation of axis name.</p>\n"},"inverse":{"description":"<p>Whether axis is inversed. New option from ECharts 3.</p>\n"},"boundaryGap":{"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: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMin&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"max":{"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMax&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"scale":{"description":"<p>It is available only in numerical axis, i.e., <a href=\"#yAxis.type\">type</a>: &#39;value&#39;.</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"},"splitNumber":{"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"},"minInterval":{"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#yAxis.type\">type</a> is &#39;time&#39;), 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> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"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>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#yAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#yAxis.type\">type</a>: &#39;log&#39;.</p>\n"},"silent":{"description":"<p>True for axis that cannot be interacted with.</p>\n"},"triggerEvent":{"description":"<p>Whether the labels of axis triggers and reacts to mouse events.</p>\n<p>Parameters of event includes:</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: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n"},"axisLine":{"properties":{"show":{"description":"<p>Whether to show the axis line or not.</p>\n"},"onZero":{"description":"<p>Specifies whether X or Y axis lies on the other&#39;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"},"onZeroAxisIndex":{"description":"<p>When mutiple axes exists, this option can be used to specify which axis can be &quot;onZero&quot; to.</p>\n"},"symbol":{"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&#39;s set to be <code>&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code>&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n"},"symbolSize":{"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"},"symbolOffset":{"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"},"lineStyle":{"properties":{"color":{"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p>line style line width.</p>\n"},"type":{"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the axis tick.</p>\n"},"alignWithLabel":{"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"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"length":{"description":"<p>The length of the axis tick.</p>\n"},"lineStyle":{"properties":{"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":{"description":"<p>axisTick line width.</p>\n"},"type":{"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the label of axis label or not.</p>\n"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"rotate":{"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"},"margin":{"description":"<p>The margin between the axis label and the axis line.</p>\n"},"formatter":{"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: &#39;{value} kg&#39;\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(&#39;/&#39;);\n}\n</code></pre>\n"},"showMinLabel":{"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"},"showMaxLabel":{"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"},"color":{"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) =&gt; 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 &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"splitLine":{"properties":{"show":{"description":"<p>Whether to show the splitLine. Value axes are shown by default, while category axes are not.</p>\n"},"interval":{"description":""},"lineStyle":{"properties":{"color":{"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: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>"},"width":{"description":"<p>splitLine line width.</p>\n"},"type":{"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"interval":{"description":""},"show":{"description":"<p>Whether to show the splitArea.</p>\n"},"areaStyle":{"properties":{"color":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"value":{"description":"<p>Name of a category.</p>\n"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}},"axisPointer":{"properties":{"show":{"description":"<p>axisPointer will not be displayed by default. But if<a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code>&#39;cross&#39;</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"},"type":{"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> line indicator</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> shadow crosshair indicator</p>\n</li>\n</ul>\n"},"snap":{"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":{"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":{"properties":{"show":{"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>&#39;cross&#39;</code>, label will be displayed automatically.</p>\n"},"precision":{"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n"},"formatter":{"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: &#39;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>&#39;category&#39;</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\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 &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"},"margin":{"description":"<p>Distance between label and axis.</p>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"},"borderColor":{"description":"<p>Border color of label.</p>\n"},"borderWidth":{"description":"<p>Border width of label.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Whether to trigger tooltip.</p>\n"},"value":{"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"},"status":{"description":"<p>Current status, can be <code>&#39;show&#39;</code> 和 <code>&#39;hide&#39;</code>.</p>\n"},"handle":{"properties":{"show":{"description":"<p>Set to <code>true</code> to use handle.</p>\n"},"icon":{"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>See the <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n"},"margin":{"description":"<p>Distance from handle center to axis.</p>\n"},"color":{"description":"<p>The color of the handle.</p>\n"},"throttle":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"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) =&gt; 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"}}}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"}}},"polar":{"properties":{"id":{"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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"center":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>"},"radius":{"description":"<p>Radius of Polar coordinate, the first of which is inner radius, and the second is outer radius.</p>\n<p>Percentage is supported. When set in percentage, it&#39;s relative to the smaller size between height and width of the container. </p>\n"},"tooltip":{"properties":{"show":{"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n"},"trigger":{"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code>&#39;axis&#39;</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>&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n"},"axisPointer":{"properties":{"type":{"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> line indicator</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> shadow crosshair indicator</p>\n</li>\n<li><p><code>&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n"},"axis":{"description":"<p>The coordinate axis, which could be <code>&#39;x&#39;</code>, <code>&#39;y&#39;</code>, <code>&#39;radius&#39;</code>, or <code>&#39;angle&#39;</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"},"snap":{"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":{"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":{"properties":{"show":{"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>&#39;cross&#39;</code>, label will be displayed automatically.</p>\n"},"precision":{"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n"},"formatter":{"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: &#39;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>&#39;category&#39;</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\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 &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"},"margin":{"description":"<p>Distance between label and axis.</p>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"},"borderColor":{"description":"<p>Border color of label.</p>\n"},"borderWidth":{"description":"<p>Border width of label.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"position":{"description":"<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"radiusAxis":{"properties":{"id":{"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":{"description":"<p>Index of radial axis in polor coordinate. It&#39;s the first axis by default.</p>\n"},"type":{"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>&#39;category&#39;</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>&#39;time&#39;</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>&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n"},"name":{"description":"<p>Name of axis.</p>\n"},"nameLocation":{"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code> or <code>&#39;center&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"nameTextStyle":{"properties":{"color":{"description":"<p>Color of axis name uses <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>axis name font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>axis name font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"nameGap":{"description":"<p>Gap between axis name and axis line.</p>\n"},"nameRotate":{"description":"<p>Rotation of axis name.</p>\n"},"inverse":{"description":"<p>Whether axis is inversed. New option from ECharts 3.</p>\n"},"boundaryGap":{"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: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMin&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"max":{"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMax&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"scale":{"description":"<p>It is available only in numerical axis, i.e., <a href=\"#radiusAxis.type\">type</a>: &#39;value&#39;.</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"},"splitNumber":{"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"},"minInterval":{"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#radiusAxis.type\">type</a> is &#39;time&#39;), 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> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"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>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#radiusAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#radiusAxis.type\">type</a>: &#39;log&#39;.</p>\n"},"silent":{"description":"<p>True for axis that cannot be interacted with.</p>\n"},"triggerEvent":{"description":"<p>Whether the labels of axis triggers and reacts to mouse events.</p>\n<p>Parameters of event includes:</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: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n"},"axisLine":{"properties":{"show":{"description":"<p>Whether to show the axis line or not.</p>\n"},"symbol":{"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&#39;s set to be <code>&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code>&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n"},"symbolSize":{"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"},"symbolOffset":{"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"},"lineStyle":{"properties":{"color":{"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p>line style line width.</p>\n"},"type":{"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the axis tick.</p>\n"},"alignWithLabel":{"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"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"length":{"description":"<p>The length of the axis tick.</p>\n"},"lineStyle":{"properties":{"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":{"description":"<p>axisTick line width.</p>\n"},"type":{"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the label of axis label or not.</p>\n"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"rotate":{"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"},"margin":{"description":"<p>The margin between the axis label and the axis line.</p>\n"},"formatter":{"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: &#39;{value} kg&#39;\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(&#39;/&#39;);\n}\n</code></pre>\n"},"showMinLabel":{"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"},"showMaxLabel":{"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"},"color":{"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) =&gt; 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 &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"splitLine":{"properties":{"show":{"description":"<p>Whether to show the splitLine. Value axes are shown by default, while category axes are not.</p>\n"},"interval":{"description":""},"lineStyle":{"properties":{"color":{"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: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>"},"width":{"description":"<p>splitLine line width.</p>\n"},"type":{"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"interval":{"description":""},"show":{"description":"<p>Whether to show the splitArea.</p>\n"},"areaStyle":{"properties":{"color":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"value":{"description":"<p>Name of a category.</p>\n"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}},"axisPointer":{"properties":{"show":{"description":"<p>axisPointer will not be displayed by default. But if<a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code>&#39;cross&#39;</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"},"type":{"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> line indicator</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> shadow crosshair indicator</p>\n</li>\n</ul>\n"},"snap":{"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":{"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":{"properties":{"show":{"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>&#39;cross&#39;</code>, label will be displayed automatically.</p>\n"},"precision":{"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n"},"formatter":{"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: &#39;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>&#39;category&#39;</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\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 &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"},"margin":{"description":"<p>Distance between label and axis.</p>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"},"borderColor":{"description":"<p>Border color of label.</p>\n"},"borderWidth":{"description":"<p>Border width of label.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Whether to trigger tooltip.</p>\n"},"value":{"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"},"status":{"description":"<p>Current status, can be <code>&#39;show&#39;</code> 和 <code>&#39;hide&#39;</code>.</p>\n"},"handle":{"properties":{"show":{"description":"<p>Set to <code>true</code> to use handle.</p>\n"},"icon":{"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>See the <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n"},"margin":{"description":"<p>Distance from handle center to axis.</p>\n"},"color":{"description":"<p>The color of the handle.</p>\n"},"throttle":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"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) =&gt; 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"}}}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"}}},"angleAxis":{"properties":{"id":{"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":{"description":"<p>The index of angle axis in Polar Coordinate. The first axis is used by default.</p>\n"},"startAngle":{"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=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/polar-start-angle&edit=1&reset=1\" width=\"400\" height=\"400\" ></iframe>\n\n\n"},"clockwise":{"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=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/polar-anticlockwise&edit=1&reset=1\" width=\"400\" height=\"400\" ></iframe>\n\n\n\n\n"},"type":{"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>&#39;category&#39;</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>&#39;time&#39;</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>&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n"},"boundaryGap":{"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: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMin&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"max":{"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMax&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"scale":{"description":"<p>It is available only in numerical axis, i.e., <a href=\"#angleAxis.type\">type</a>: &#39;value&#39;.</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"},"splitNumber":{"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"},"minInterval":{"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#angleAxis.type\">type</a> is &#39;time&#39;), 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> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"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>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#angleAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#angleAxis.type\">type</a>: &#39;log&#39;.</p>\n"},"silent":{"description":"<p>True for axis that cannot be interacted with.</p>\n"},"triggerEvent":{"description":"<p>Whether the labels of axis triggers and reacts to mouse events.</p>\n<p>Parameters of event includes:</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: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n"},"axisLine":{"properties":{"show":{"description":"<p>Whether to show the axis line or not.</p>\n"},"symbol":{"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&#39;s set to be <code>&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code>&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n"},"symbolSize":{"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"},"symbolOffset":{"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"},"lineStyle":{"properties":{"color":{"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p>line style line width.</p>\n"},"type":{"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the axis tick.</p>\n"},"alignWithLabel":{"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"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"length":{"description":"<p>The length of the axis tick.</p>\n"},"lineStyle":{"properties":{"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":{"description":"<p>axisTick line width.</p>\n"},"type":{"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the label of axis label or not.</p>\n"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"margin":{"description":"<p>The margin between the axis label and the axis line.</p>\n"},"formatter":{"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: &#39;{value} kg&#39;\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(&#39;/&#39;);\n}\n</code></pre>\n"},"showMinLabel":{"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"},"showMaxLabel":{"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"},"color":{"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) =&gt; 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 &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"splitLine":{"properties":{"show":{"description":"<p>Whether to show the splitLine. Value axes are shown by default, while category axes are not.</p>\n"},"interval":{"description":""},"lineStyle":{"properties":{"color":{"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: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>"},"width":{"description":"<p>splitLine line width.</p>\n"},"type":{"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"interval":{"description":""},"show":{"description":"<p>Whether to show the splitArea.</p>\n"},"areaStyle":{"properties":{"color":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"value":{"description":"<p>Name of a category.</p>\n"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}},"axisPointer":{"properties":{"show":{"description":"<p>axisPointer will not be displayed by default. But if<a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code>&#39;cross&#39;</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"},"type":{"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> line indicator</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> shadow crosshair indicator</p>\n</li>\n</ul>\n"},"snap":{"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":{"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":{"properties":{"show":{"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>&#39;cross&#39;</code>, label will be displayed automatically.</p>\n"},"precision":{"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n"},"formatter":{"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: &#39;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>&#39;category&#39;</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\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 &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"},"margin":{"description":"<p>Distance between label and axis.</p>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"},"borderColor":{"description":"<p>Border color of label.</p>\n"},"borderWidth":{"description":"<p>Border width of label.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Whether to trigger tooltip.</p>\n"},"value":{"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"},"status":{"description":"<p>Current status, can be <code>&#39;show&#39;</code> 和 <code>&#39;hide&#39;</code>.</p>\n"},"handle":{"properties":{"show":{"description":"<p>Set to <code>true</code> to use handle.</p>\n"},"icon":{"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>See the <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n"},"margin":{"description":"<p>Distance from handle center to axis.</p>\n"},"color":{"description":"<p>The color of the handle.</p>\n"},"throttle":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"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) =&gt; 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"}}}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"}}},"radar":{"properties":{"id":{"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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"center":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>"},"radius":{"description":"<p>Radius of , the first of which is inner radius, and the second is outer radius.</p>\n<p>Percentage is supported. When set in percentage, it&#39;s relative to the smaller size between height and width of the container. </p>\n"},"startAngle":{"description":"<p>The start angle of coordinate, which is the angle of the first indicator axis.</p>\n"},"name":{"properties":{"show":{"description":"<p>Whether to display the indicator&#39;s name.</p>\n"},"formatter":{"description":"<p>The formatter of indicator&#39;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&#39;s name {value}\nformatter: &#39;【{value}】&#39;\n// using callback function, the first parameter is the indicator&#39;s name, and the second parameter id the indicator&#39;s cinfiguration item\nformatter: function (value, indicator) {\n    return &#39;【&#39; + value + &#39;】&#39;;\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"nameGap":{"description":"<p>Distance between the indicator&#39;s name and axis.</p>\n"},"splitNumber":{"description":"<p>Segments of indicator axis.</p>\n"},"shape":{"description":"<p>Radar render type, in which <code>&#39;polygon&#39;</code> and <code>&#39;circle&#39;</code> are supported.</p>\n"},"scale":{"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"},"silent":{"description":"<p>True for axis that cannot be interacted with.</p>\n"},"triggerEvent":{"description":"<p>Whether the labels of axis triggers and reacts to mouse events.</p>\n<p>Parameters of event includes:</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: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n"},"axisLine":{"properties":{"show":{"description":"<p>Whether to show the axis line or not.</p>\n"},"symbol":{"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&#39;s set to be <code>&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code>&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n"},"symbolSize":{"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"},"symbolOffset":{"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"},"lineStyle":{"properties":{"color":{"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p>line style line width.</p>\n"},"type":{"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the axis tick.</p>\n"},"alignWithLabel":{"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"},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"length":{"description":"<p>The length of the axis tick.</p>\n"},"lineStyle":{"properties":{"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":{"description":"<p>axisTick line width.</p>\n"},"type":{"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the label of axis label or not.</p>\n"},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"rotate":{"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"},"margin":{"description":"<p>The margin between the axis label and the axis line.</p>\n"},"formatter":{"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: &#39;{value} kg&#39;\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(&#39;/&#39;);\n}\n</code></pre>\n"},"showMinLabel":{"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"},"showMaxLabel":{"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"},"color":{"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) =&gt; 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 &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"splitLine":{"properties":{"show":{"properties":{"color":{"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: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>"},"width":{"description":"<p>splitLine line width.</p>\n"},"type":{"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the splitArea.</p>\n"},"areaStyle":{"properties":{"color":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Indicator&#39;s name.</p>\n"},"max":{"description":"<p>The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.</p>\n"},"min":{"description":"<p>The minimum value of indicator. It it an optional configuration, with default value of 0.</p>\n"}}}},"color":{"description":"<p>Specfy a color the the indicator.</p>\n"}}},"dataZoom":{"items":{"anyOf":[{"properties":{"type":{"description":""},"id":{"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":{"description":"<p>Whether disable inside zoom.</p>\n"},"xAxisIndex":{"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>&#39;horizontal&#39;</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"},"yAxisIndex":{"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>&#39;vertical&#39;</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"},"radiusAxisIndex":{"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"},"angleAxisIndex":{"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"},"filterMode":{"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>&#39;filter&#39;: 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>&#39;weakFilter&#39;: 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>&#39;empty&#39;: 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>&#39;none&#39;: 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: &#39;filter&#39;</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>&#39;value&#39;</code>), they should be set to be <code>filterMode: &#39;empty&#39;</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: &#39;filter&#39;</code>, while <code>yAxis</code> shoule be set to be <code>fiterMode: &#39;empty&#39;</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: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\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: &#39;filter&#39;</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: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code>dataZoomY</code> is set as <code>filterMode: &#39;empty&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n\n\n"},"start":{"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"},"end":{"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"},"startValue":{"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"},"endValue":{"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"},"minSpan":{"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"},"maxSpan":{"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"},"minValueSpan":{"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 &quot;5 day&quot;.\nIn category axis it can be set as <code>5</code> to represent 5 categories.</p>\n"},"maxValueSpan":{"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 &quot;5 day&quot;.\nIn category axis it can be set as <code>5</code> to represent 5 categories.</p>\n"},"orient":{"description":"<p>Specify whether the layout of <code>dataZoom</code> component is horizontal or vertical. What&#39;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>&#39;horizontal&#39;</code>: horizontal.</p>\n</li>\n<li><p><code>&#39;vertical&#39;</code>: vertical.</p>\n</li>\n</ul>\n"},"zoomLock":{"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"},"throttle":{"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"},"rangeMode":{"description":"<p>For example <code>rangeMode: [&#39;value&#39;, &#39;percent&#39;]</code> means that use absolute value in <code>start</code> and percent value in <code>end</code>.</p>\n<p>Optional value: <code>&#39;value&#39;</code>, <code>&#39;percent&#39;</code>.</p>\n"},"zoomOnMouseWheel":{"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>&#39;shift&#39;</code>：Holding <code>shift</code> and mouse wheel triggers zoom.</li>\n<li><code>&#39;ctrl&#39;</code>：Holding <code>ctrl</code> and mouse wheel triggers zoom.</li>\n<li><code>&#39;alt&#39;</code>：Holding <code>alt</code> and mouse wheel triggers zoom.</li>\n</ul>\n"},"moveOnMouseMove":{"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>&#39;shift&#39;</code>：Holding <code>shift</code> and mouse move triggers data window move.</li>\n<li><code>&#39;ctrl&#39;</code>：Holding <code>ctrl</code> and mouse move triggers data window move.</li>\n<li><code>&#39;alt&#39;</code>：Holding <code>alt</code> and mouse move triggers data window move.</li>\n</ul>\n"},"preventDefaultMouseMove":{"description":"<p>Whether to prevent default behavior of mouse move event.</p>\n"}}},{"properties":{"type":{"description":""},"id":{"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":{"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"},"backgroundColor":{"description":"<p>The background color of the component.</p>\n"},"dataBackground":{"properties":{"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"fillerColor":{"description":"<p>The color to fill selected area.</p>\n"},"borderColor":{"description":"<p>The color of border.</p>\n"},"handleIcon":{"description":"<p>Icon shape of handle, which supports path string. Its default value is:</p>\n<pre><code class=\"lang-js\">&#39;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&#39;\n</code></pre>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>Refer to <a href=\"http://echarts.baidu.com/gallery/editor.html?c=area-simple\" target=\"_blank\">area-simple example</a> for customized icon.</p>\n"},"handleSize":{"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&#39;s the same as the width of dataZoom component.</p>\n"},"handleStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Precision of label if in number form. By default, it is decided based on the number of data.</p>\n"},"labelFormatter":{"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 &#39;category&#39;, `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 &#39;aaa&#39; + value + &#39;bbb&#39;;\n}\n</code></pre>\n"},"showDetail":{"description":"<p>Whether to show detail, that is, show the detailed data information when dragging.</p>\n"},"showDataShadow":{"description":"<p>Whether to show data shadow in <code>dataZoom-silder</code> component, to indicate the data tendency in brief.</p>\n"},"realtime":{"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"},"textStyle":{"properties":{"color":{"description":"<p>dataZoom  text color.</p>\n"},"fontStyle":{"description":"<p>dataZoom  font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>dataZoom  font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>dataZoom  font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>dataZoom  font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"xAxisIndex":{"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>&#39;horizontal&#39;</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"},"yAxisIndex":{"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>&#39;vertical&#39;</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"},"radiusAxisIndex":{"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"},"angleAxisIndex":{"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"},"filterMode":{"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>&#39;filter&#39;: 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>&#39;weakFilter&#39;: 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>&#39;empty&#39;: 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>&#39;none&#39;: 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: &#39;filter&#39;</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>&#39;value&#39;</code>), they should be set to be <code>filterMode: &#39;empty&#39;</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: &#39;filter&#39;</code>, while <code>yAxis</code> shoule be set to be <code>fiterMode: &#39;empty&#39;</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: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\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: &#39;filter&#39;</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: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code>dataZoomY</code> is set as <code>filterMode: &#39;empty&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n\n\n"},"start":{"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"},"end":{"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"},"startValue":{"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"},"endValue":{"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"},"minSpan":{"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"},"maxSpan":{"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"},"minValueSpan":{"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 &quot;5 day&quot;.\nIn category axis it can be set as <code>5</code> to represent 5 categories.</p>\n"},"maxValueSpan":{"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 &quot;5 day&quot;.\nIn category axis it can be set as <code>5</code> to represent 5 categories.</p>\n"},"orient":{"description":"<p>Specify whether the layout of <code>dataZoom</code> component is horizontal or vertical. What&#39;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>&#39;horizontal&#39;</code>: horizontal.</p>\n</li>\n<li><p><code>&#39;vertical&#39;</code>: vertical.</p>\n</li>\n</ul>\n"},"zoomLock":{"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"},"throttle":{"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"},"rangeMode":{"description":"<p>For example <code>rangeMode: [&#39;value&#39;, &#39;percent&#39;]</code> means that use absolute value in <code>start</code> and percent value in <code>end</code>.</p>\n<p>Optional value: <code>&#39;value&#39;</code>, <code>&#39;percent&#39;</code>.</p>\n"},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"}}}]}},"visualMap":{"items":{"anyOf":[{"properties":{"type":{"description":"<p>Used to determine that it is a continuous visualMap component.</p>\n"},"id":{"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":{"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":{"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":{"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":{"description":"<p>Whether show handles, which can be dragged to adjust &quot;selected range&quot;.</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>&#39;continuous&#39;</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"},"realtime":{"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"},"inverse":{"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>&#39;vertical&#39;</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>&#39;horizontal&#39;</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"},"precision":{"description":"<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n"},"itemWidth":{"description":"<p>The width of the main bar of visualMap component.</p>\n"},"itemHeight":{"description":"<p>The height of the main bar of visualMap component.</p>\n"},"align":{"description":"<p>Specify the position of handles and labels, against the main bar. The possible values are:</p>\n<ul>\n<li><code>&#39;auto&#39;</code> Decide automatically.</li>\n<li><code>&#39;left&#39;</code> The handles and labels are on the right, which is valid when <code>orient</code> is set as <code>&#39;horizontal&#39;</code>.</li>\n<li><code>&#39;right&#39;</code> The handles and labels are on the left, which is valid when <code>orient</code> is set as <code>&#39;horizontal&#39;</code>.</li>\n<li><code>&#39;top&#39;</code> the handles and labels are at the bottom, which is valid when <code>orient</code> is set as  <code>&#39;vertical&#39;</code>.</li>\n<li><code>&#39;bottom&#39;</code> the handles and labels are at the top, which is valid when <code>orient</code> is set as <code>&#39;vertical&#39;</code>.</li>\n</ul>\n"},"text":{"description":"<p>The label text on both ends, such as <code>[&#39;High&#39;, &#39;Low&#39;]</code>. <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/map-visualMap-continuous-text&amp;edit=1&amp;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"},"textGap":{"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"},"show":{"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"},"dimension":{"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":{"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":{"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"},"inRange":{"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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</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: [&#39;#333&#39;, &#39;#777&#39;]</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: &#39;#333&#39;</code> will be converted to <code>color: [&#39;#333&#39;, &#39;#333&#39;]</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>[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</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>&#39;#333&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;blue&#39;</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>[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>&#39;circle&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;diamond&#39;</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>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;diamond&#39;</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>&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\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>[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code>[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code>color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</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: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object：\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\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: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;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: [&#39;red&#39;, &#39;blue&#39;]}\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 &quot;merge&quot;, 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 &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; 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() -&gt; modify the gotten option -&gt; 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 = [&#39;red&#39;, &#39;blue&#39;]; // 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 = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\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>[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</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":{"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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</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: [&#39;#333&#39;, &#39;#777&#39;]</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: &#39;#333&#39;</code> will be converted to <code>color: [&#39;#333&#39;, &#39;#333&#39;]</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>[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</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>&#39;#333&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;blue&#39;</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>[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>&#39;circle&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;diamond&#39;</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>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;diamond&#39;</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>&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\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>[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code>[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code>color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</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: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object：\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\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: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;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: [&#39;red&#39;, &#39;blue&#39;]}\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 &quot;merge&quot;, 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 &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; 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() -&gt; modify the gotten option -&gt; 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 = [&#39;red&#39;, &#39;blue&#39;]; // 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 = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\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":{"properties":{"inRange":{"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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</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: [&#39;#333&#39;, &#39;#777&#39;]</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: &#39;#333&#39;</code> will be converted to <code>color: [&#39;#333&#39;, &#39;#333&#39;]</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>[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</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>&#39;#333&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;blue&#39;</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>[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>&#39;circle&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;diamond&#39;</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>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;diamond&#39;</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>&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\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>[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code>[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code>color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</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: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object：\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\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: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;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: [&#39;red&#39;, &#39;blue&#39;]}\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 &quot;merge&quot;, 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 &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; 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() -&gt; modify the gotten option -&gt; 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 = [&#39;red&#39;, &#39;blue&#39;]; // 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 = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\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>[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</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":{"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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</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: [&#39;#333&#39;, &#39;#777&#39;]</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: &#39;#333&#39;</code> will be converted to <code>color: [&#39;#333&#39;, &#39;#333&#39;]</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>[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</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>&#39;#333&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;blue&#39;</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>[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>&#39;circle&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;diamond&#39;</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>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;diamond&#39;</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>&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\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>[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code>[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code>color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</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: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object：\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\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: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;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: [&#39;red&#39;, &#39;blue&#39;]}\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 &quot;merge&quot;, 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 &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; 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() -&gt; modify the gotten option -&gt; 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 = [&#39;red&#39;, &#39;blue&#39;]; // 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 = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n"},"orient":{"description":"<p>How to layout the visualMap component, <code>&#39;horizontal&#39;</code> or <code>&#39;vertical&#39;</code>.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>background color of visualMap component.</p>\n"},"borderColor":{"description":"<p>border color of visualMap component.</p>\n"},"borderWidth":{"description":"<p>border width of visualMap component, with unit: px.</p>\n"},"color":{"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"},"textStyle":{"properties":{"color":{"description":"<p>visualMap  text color.</p>\n"},"fontStyle":{"description":"<p>visualMap  font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>visualMap  font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>visualMap  font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>visualMap  font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"formatter":{"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 &#39;aaaa&#39; + value + &#39;bbbb&#39;;\n}\n</code></pre>\n"}}},{"properties":{"type":{"description":"<p>Used to determine it is a piecewise visualMap component.</p>\n"},"id":{"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":{"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"},"pieces":{"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: &#39;10 to 200 (custom label) &#39;},\n    // Color of the piece can be specified.\n    {value: 123, label: &#39;123 (custom special color) &#39;, color: &#39;grey&#39;},\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=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/map-visualMap-pieces&amp;edit=1&amp;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":{"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    &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n],\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;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":{"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&#39;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":{"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&#39;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":{"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 &quot;&lt; min&quot; will show.</p>\n"},"maxOpen":{"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 &quot;&gt; max&quot; will show.</p>\n"},"selectedMode":{"description":"<p>Selected Mode could be:</p>\n<ul>\n<li><code>&#39;multiple&#39;</code> (multiple selection).</li>\n<li><code>&#39;single&#39;</code> (single selection).</li>\n</ul>\n"},"inverse":{"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>&#39;vertical&#39;</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>&#39;horizontal&#39;</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&#39;ll know it is not so complicated.</p>\n"},"precision":{"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"},"itemWidth":{"description":"<p>The width of each graphical element that represents a piece.</p>\n"},"itemHeight":{"description":"<p>The height of each graphical element that represents a piece.</p>\n"},"align":{"description":"<p>The layout relationship between the graphical elements for pieces and their labels. Possible values are:</p>\n<ul>\n<li><code>&#39;auto&#39;</code> Decide automatically.</li>\n<li><code>&#39;left&#39;</code> The graphical elements for pieces are on the left and their labels are on the right.</li>\n<li><code>&#39;right&#39;</code> The graphical elements for pieces are on the right and their labels are on the left.</li>\n</ul>\n"},"text":{"description":"<p>The label text on both ends, such as <code>[&#39;High&#39;, &#39;Low&#39;]</code>. <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/map-visualMap-piecewise-text&amp;edit=1&amp;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"},"textGap":{"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"},"showLabel":{"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":{"description":"<p>Its the distance between each two graphical elements for pieces. The unit is px.</p>\n"},"itemSymbol":{"description":"<p>Default symbol (the shape of graphical element). Possible values are:</p>\n<p><code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>The setting of visual channel <code>symbol</code> can refers 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"},"show":{"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"},"dimension":{"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":{"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":{"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"},"inRange":{"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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</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: [&#39;#333&#39;, &#39;#777&#39;]</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: &#39;#333&#39;</code> will be converted to <code>color: [&#39;#333&#39;, &#39;#333&#39;]</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>[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</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>&#39;#333&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;blue&#39;</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>[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>&#39;circle&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;diamond&#39;</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>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;diamond&#39;</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>&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\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>[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code>[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code>color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</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: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object：\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\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: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;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: [&#39;red&#39;, &#39;blue&#39;]}\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 &quot;merge&quot;, 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 &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; 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() -&gt; modify the gotten option -&gt; 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 = [&#39;red&#39;, &#39;blue&#39;]; // 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 = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\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>[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</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":{"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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</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: [&#39;#333&#39;, &#39;#777&#39;]</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: &#39;#333&#39;</code> will be converted to <code>color: [&#39;#333&#39;, &#39;#333&#39;]</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>[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</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>&#39;#333&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;blue&#39;</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>[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>&#39;circle&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;diamond&#39;</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>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;diamond&#39;</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>&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\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>[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code>[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code>color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</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: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object：\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\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: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;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: [&#39;red&#39;, &#39;blue&#39;]}\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 &quot;merge&quot;, 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 &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; 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() -&gt; modify the gotten option -&gt; 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 = [&#39;red&#39;, &#39;blue&#39;]; // 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 = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\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":{"properties":{"inRange":{"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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</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: [&#39;#333&#39;, &#39;#777&#39;]</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: &#39;#333&#39;</code> will be converted to <code>color: [&#39;#333&#39;, &#39;#333&#39;]</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>[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</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>&#39;#333&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;blue&#39;</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>[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>&#39;circle&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;diamond&#39;</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>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;diamond&#39;</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>&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\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>[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code>[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code>color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</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: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object：\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\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: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;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: [&#39;red&#39;, &#39;blue&#39;]}\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 &quot;merge&quot;, 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 &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; 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() -&gt; modify the gotten option -&gt; 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 = [&#39;red&#39;, &#39;blue&#39;]; // 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 = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\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>[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</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":{"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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\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: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</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: [&#39;#333&#39;, &#39;#777&#39;]</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: &#39;#333&#39;</code> will be converted to <code>color: [&#39;#333&#39;, &#39;#333&#39;]</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>[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</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>&#39;#333&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;blue&#39;</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>[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>&#39;circle&#39;</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>&#39;diamond&#39;</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>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;diamond&#39;</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>&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\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>[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code>[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code>color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</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: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    outOfRange: {\n        // visual value can be an Object：\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\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: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;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: [&#39;red&#39;, &#39;blue&#39;]}\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 &quot;merge&quot;, 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 &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; 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() -&gt; modify the gotten option -&gt; 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 = [&#39;red&#39;, &#39;blue&#39;]; // 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 = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n"},"orient":{"description":"<p>How to layout the visualMap component, <code>&#39;horizontal&#39;</code> or <code>&#39;vertical&#39;</code>.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>background color of visualMap component.</p>\n"},"borderColor":{"description":"<p>border color of visualMap component.</p>\n"},"borderWidth":{"description":"<p>border width of visualMap component, with unit: px.</p>\n"},"color":{"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"},"textStyle":{"properties":{"color":{"description":"<p>visualMap  text color.</p>\n"},"fontStyle":{"description":"<p>visualMap  font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>visualMap  font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>visualMap  font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>visualMap  font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"formatter":{"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 &#39;aaaa&#39; + value + &#39;bbbb&#39; + value2;\n}\n</code></pre>\n"}}}]}},"tooltip":{"properties":{"show":{"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n"},"trigger":{"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code>&#39;axis&#39;</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>&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n"},"axisPointer":{"properties":{"type":{"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> line indicator</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> shadow crosshair indicator</p>\n</li>\n<li><p><code>&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n"},"axis":{"description":"<p>The coordinate axis, which could be <code>&#39;x&#39;</code>, <code>&#39;y&#39;</code>, <code>&#39;radius&#39;</code>, or <code>&#39;angle&#39;</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"},"snap":{"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":{"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":{"properties":{"show":{"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>&#39;cross&#39;</code>, label will be displayed automatically.</p>\n"},"precision":{"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n"},"formatter":{"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: &#39;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>&#39;category&#39;</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\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 &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"},"margin":{"description":"<p>Distance between label and axis.</p>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"},"borderColor":{"description":"<p>Border color of label.</p>\n"},"borderWidth":{"description":"<p>Border width of label.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"showContent":{"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"},"alwaysShowContent":{"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"},"triggerOn":{"description":"<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code>&#39;mousemove&#39;</code></p>\n<p>  Trigger when mouse moves.</p>\n</li>\n<li><p><code>&#39;click&#39;</code></p>\n<p>  Trigger when mouse clicks.</p>\n</li>\n<li><p><code>&#39;mousemove|click&#39;</code></p>\n<p>  Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code>&#39;none&#39;</code></p>\n<p>  Do not triggered by <code>&#39;mousemove&#39;</code> and <code>&#39;click&#39;</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"},"showDelay":{"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>&#39;mousemove&#39;</code>.</p>\n"},"hideDelay":{"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"},"enterable":{"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"},"confine":{"description":"<p>Whether confine tooltip content in the view rect of chart instance.</p>\n<p>Useful when tooltip is cut because of <code>&#39;overflow: hidden&#39;</code> set on outer dom of chart instance, or because of narrow screen on mobile.</p>\n"},"transitionDuration":{"description":"<p>The transition duration of tooltip&#39;s animation, in seconds. When it is set to be 0, it would move closely with the mouse.</p>\n"},"position":{"description":"<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}},"axisPointer":{"properties":{"id":{"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":{"description":"<p>axisPointer will not be displayed by default. But if<a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code>&#39;cross&#39;</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"},"type":{"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> line indicator</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> shadow crosshair indicator</p>\n</li>\n</ul>\n"},"snap":{"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":{"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":{"properties":{"show":{"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>&#39;cross&#39;</code>, label will be displayed automatically.</p>\n"},"precision":{"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n"},"formatter":{"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: &#39;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>&#39;category&#39;</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\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 &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"},"margin":{"description":"<p>Distance between label and axis.</p>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"},"borderColor":{"description":"<p>Border color of label.</p>\n"},"borderWidth":{"description":"<p>Border width of label.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Whether to trigger tooltip.</p>\n"},"value":{"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"},"status":{"description":"<p>Current status, can be <code>&#39;show&#39;</code> 和 <code>&#39;hide&#39;</code>.</p>\n"},"handle":{"properties":{"show":{"description":"<p>Set to <code>true</code> to use handle.</p>\n"},"icon":{"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>See the <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n"},"margin":{"description":"<p>Distance from handle center to axis.</p>\n"},"color":{"description":"<p>The color of the handle.</p>\n"},"throttle":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}},"link":{"description":"<p>axisPointers can be linked to each other. The term &quot;link&quot; represents that axes are synchronized and move together. Axes are linked according to the value of axisPointer.</p>\n<p>See <a href=\"http://echarts.baidu.com/gallery/view.html?c=candlestick-brush&amp;edit=1&amp;reset=1\" target=\"_blank\">sampleA</a> and <a href=\"http://echarts.baidu.com/gallery/view.html?c=scatter-nutrients-matrix&amp;edit=1&amp;reset=1\" target=\"_blank\">sampleB</a>。</p>\n<p>link is an array, where each item represents a &quot;link group&quot;. 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 &#39;sameName&#39; will be linked.\n        xAxisIndex: [0, 3, 4],\n        yAxisName: &#39;someName&#39;\n    },\n    {\n        // All axes with xAxisId &#39;aa&#39;, &#39;cc&#39; and all angleAxis will be linked.\n        xAxisId: [&#39;aa&#39;, &#39;cc&#39;],\n        angleAxis: &#39;all&#39;\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    // &#39;some&#39; represent the dimension name of a axis, namely, &#39;x&#39;, &#39;y&#39;, &#39;radius&#39;, &#39;angle&#39;, &#39;single&#39;\n    someAxisIndex: [...], // can be an array or a value or &#39;all&#39;\n    someAxisName: [...],  // can be an array or a value or &#39;all&#39;\n    someAxisId: [...],    // can be an array or a value or &#39;all&#39;\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 &#39;category&#39;, and the type of axisB type is &#39;time&#39;, 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: [&#39;yy&#39;],\n    mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {\n        if (sourceAxisInfo.axisName === &#39;yy&#39;) {\n            // from timestamp to &#39;2012-02-05&#39;\n            return echarts.format.formatTime(&#39;yyyy-MM-dd&#39;, sourceVal);\n        }\n        else if (targetAxisInfo.axisName === &#39;yy&#39;) {\n            // from &#39;2012-02-05&#39; 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":{"description":"<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code>&#39;mousemove&#39;</code></p>\n<p>  Trigger when mouse moves.</p>\n</li>\n<li><p><code>&#39;click&#39;</code></p>\n<p>  Trigger when mouse clicks.</p>\n</li>\n<li><p><code>&#39;mousemove|click&#39;</code></p>\n<p>  Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code>&#39;none&#39;</code></p>\n<p>  Do not triggered by <code>&#39;mousemove&#39;</code> and <code>&#39;click&#39;</code></p>\n</li>\n</ul>\n"}}},"toolbox":{"properties":{"id":{"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":{"description":"<p>Whether to show toolbox component.</p>\n"},"orient":{"description":"<p>The layout orientation of toolbox&#39;s icon.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n"},"itemSize":{"description":"<p>The size of toolbox&#39;s icon.</p>\n"},"itemGap":{"description":"<p>The gap between each icon of toolbox. It is horizontal gap in horizontal layout, while vertical gap in vertical layout.</p>\n"},"showTitle":{"description":"<p>Whether to show the title of each tool icon when mouse hovers.</p>\n"},"feature":{"properties":{"saveAsImage":{"properties":{"type":{"description":"<p>Format to save the image in, which supports<code>&#39;png&#39;</code> and <code>&#39;jpeg&#39;</code>.</p>\n"},"name":{"description":"<p>Name to save the image, whose default value is <a href=\"#title.text\">title.text</a>.</p>\n"},"backgroundColor":{"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"},"excludeComponents":{"description":"<p>Components to be excluded when export. By default, toolbox is excluded.</p>\n"},"show":{"description":"<p>Whether to show the tool.</p>\n"},"title":{"description":""},"icon":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"iconStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Position of label: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code> / <code>&#39;top&#39;</code> / <code>&#39;bottom&#39;</code>.</p>\n"},"textAlign":{"description":"<p>Align of label text: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code>.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"pixelRatio":{"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"}}},"restore":{"properties":{"show":{"description":"<p>Whether to show the tool.</p>\n"},"title":{"description":""},"icon":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"iconStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Position of label: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code> / <code>&#39;top&#39;</code> / <code>&#39;bottom&#39;</code>.</p>\n"},"textAlign":{"description":"<p>Align of label text: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code>.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}}}},"dataView":{"properties":{"show":{"description":"<p>Whether to show the tool.</p>\n"},"title":{"description":""},"icon":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"iconStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Position of label: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code> / <code>&#39;top&#39;</code> / <code>&#39;bottom&#39;</code>.</p>\n"},"textAlign":{"description":"<p>Align of label text: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code>.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"readOnly":{"description":"<p>Whether it is read-only.</p>\n"},"optionToContent":{"description":"<pre><code class=\"lang-js\">(option:Object) =&gt; 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 = &#39;&lt;table style=&quot;width:100%;text-align:center&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&#39;\n                 + &#39;&lt;td&gt;Time:&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[0].name + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[1].name + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;/tr&gt;&#39;;\n    for (var i = 0, l = axisData.length; i &lt; l; i++) {\n        table += &#39;&lt;tr&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + axisData[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[0].data[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[1].data[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;/tr&gt;&#39;;\n    }\n    table += &#39;&lt;/tbody&gt;&lt;/table&gt;&#39;;\n    return table;\n}\n</code></pre>\n"},"contentToOption":{"description":"<pre><code class=\"lang-js\">(container:HTMLDomElement, option:Object) =&gt; 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":{"description":"<p>There are 3 names in data view, which are <code>[&#39;data view&#39;, &#39;turn off&#39; and &#39;refresh&#39;]</code>.</p>\n"},"backgroundColor":{"description":"<p>Background color of the floating layer in data view.</p>\n"},"textareaColor":{"description":"<p>Background color of input area of the floating layer in data view.</p>\n"},"textareaBorderColor":{"description":"<p>Border color of input area of the floating layer in data view.</p>\n"},"textColor":{"description":"<p>Text color.</p>\n"},"buttonColor":{"description":"<p>Button color.</p>\n"},"buttonTextColor":{"description":"<p>Color of button text.</p>\n"}}},"dataZoom":{"properties":{"show":{"description":"<p>Whether to show the tool.</p>\n"},"title":{"properties":{"zoom":{"description":""},"back":{"description":""}}},"icon":{"properties":{"zoom":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"back":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"}}},"iconStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Position of label: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code> / <code>&#39;top&#39;</code> / <code>&#39;bottom&#39;</code>.</p>\n"},"textAlign":{"description":"<p>Align of label text: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code>.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"xAxisIndex":{"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":{"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":{"properties":{"show":{"description":"<p>Whether to show the tool.</p>\n"},"type":{"description":"<p>Enabled magic types, including <code>&#39;line&#39;</code> (for line charts), <code>&#39;bar&#39;</code> (for bar charts), <code>&#39;stack&#39;</code> (for stacked charts), and <code>&#39;tiled&#39;</code> (for tiled charts).</p>\n"},"title":{"properties":{"line":{"description":""},"bar":{"description":""},"stack":{"description":""},"tiled":{"description":""}}},"icon":{"properties":{"line":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"bar":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"stack":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"tiled":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"}}},"iconStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Position of label: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code> / <code>&#39;top&#39;</code> / <code>&#39;bottom&#39;</code>.</p>\n"},"textAlign":{"description":"<p>Align of label text: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code>.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"option":{"properties":{"line":{"description":""},"bar":{"description":""},"stack":{"description":""},"tiled":{"description":""}}},"seriesIndex":{"properties":{"line":{"description":""},"bar":{"description":""},"stack":{"description":""},"tiled":{"description":""}}}}},"brush":{"properties":{"type":{"description":"<p>Icons used, whose values are:</p>\n<ul>\n<li><code>&#39;rect&#39;</code>: Enabling selecting with rectangle area.</li>\n<li><code>&#39;polygon&#39;</code>: Enabling selecting with any shape.</li>\n<li><code>&#39;lineX&#39;</code>: Enabling horizontal selecting.</li>\n<li><code>&#39;lineY&#39;</code>: Enabling vertical selecting.</li>\n<li><code>&#39;keep&#39;</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>&#39;clear&#39;</code>: Clearing all selection.</li>\n</ul>\n"},"icon":{"properties":{"rect":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"polygon":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"lineX":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"lineY":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"keep":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"clear":{"description":"<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"}}},"title":{"properties":{"rect":{"description":""},"polygon":{"description":""},"lineX":{"description":""},"lineY":{"description":""},"keep":{"description":""},"clear":{"description":""}}}}}}},"iconStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Position of label: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code> / <code>&#39;top&#39;</code> / <code>&#39;bottom&#39;</code>.</p>\n"},"textAlign":{"description":"<p>Align of label text: <code>&#39;left&#39;</code> / <code>&#39;right&#39;</code>.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"width":{"description":"<p>Width of toolbox component. Adaptive by default.</p>\n"},"height":{"description":"<p>Height of toolbox component. Adaptive by default.</p>\n"}}},"brush":{"properties":{"id":{"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":{"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>&#39;rect&#39;</code>: for selection-box in rectangle shape;</li>\n<li><code>&#39;polygon&#39;</code>: for selection-box in polygon shape;</li>\n<li><code>&#39;lineX&#39;</code>: for horizontal selection-box;</li>\n<li><code>&#39;lineY&#39;</code>: for vertical selection-box;</li>\n<li><code>&#39;keep&#39;</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>&#39;clear&#39;</code>: for clearing all selections.</li>\n</ul>\n"},"brushLink":{"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>&#39;all&#39;</code> for interacting all series;</li>\n<li><code>&#39;none&#39;</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: &#39;bar&#39;\n            data: [232,    4434,    545,      654]     // data has 4 items\n        },\n        {\n            type: &#39;parallel&#39;,\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"},"seriesIndex":{"description":"<p>Assigns which of the series can use brush selecting, whose value can be:</p>\n<ul>\n<li><code>&#39;all&#39;</code>: all series;</li>\n<li><code>&#39;Array&#39;</code>: series index array;</li>\n<li><code>&#39;number&#39;</code>: certain series index.</li>\n</ul>\n"},"geoIndex":{"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&#39;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>&#39;all&#39;</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>&#39;none&#39;</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: &#39;all&#39;, // 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"},"xAxisIndex":{"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&#39;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>&#39;all&#39;</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>&#39;none&#39;</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: &#39;all&#39;, // 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"},"yAxisIndex":{"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&#39;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>&#39;all&#39;</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>&#39;none&#39;</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: &#39;all&#39;, // 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"},"brushType":{"description":"<p>Default type of brush.</p>\n<ul>\n<li><code>&#39;rect&#39;</code>: for selection-box in rectangle shape;</li>\n<li><code>&#39;polygon&#39;</code>: for selection-box in polygon shape;</li>\n<li><code>&#39;lineX&#39;</code>: for horizontal selection-box;</li>\n<li><code>&#39;lineY&#39;</code>: for vertical selection-box;</li>\n</ul>\n"},"brushMode":{"description":"<p>Default brush mode, whose value can be:</p>\n<ul>\n<li><code>&#39;single&#39;</code>: for single selection;</li>\n<li><code>&#39;multiple&#39;</code>: for multiple selection.</li>\n</ul>\n"},"transformable":{"description":"<p>Determines whether a selected box can be changed in shape or translated.</p>\n"},"brushStyle":{"description":"<p>Defailt brush style, whose value is:</p>\n<pre><code class=\"lang-javascript\">{\n    borderWidth: 1,\n    color: &#39;rgba(120,140,180,0.3)&#39;,\n    borderColor: &#39;rgba(120,140,180,0.8)&#39;\n},\n</code></pre>\n"},"throttleType":{"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>&#39;debounce&#39;</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>&#39;fixRate&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=scatter-map-brush&amp;edit=1&amp;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"},"throttleDelay":{"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>&#39;debounce&#39;</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>&#39;fixRate&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=scatter-map-brush&amp;edit=1&amp;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"},"removeOnClick":{"description":"<p>Defined whether <em>clearing all select-boxes on click</em> is enabled when <a href=\"#brush.brushMode\">brush.brushMode</a> is <code>&#39;single&#39;</code>.</p>\n"},"inBrush":{"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":{"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>&#39;#ddd&#39;</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":{"description":"<p>z-index of brush cover box. It can be adjust when incorrect overlap occurs.</p>\n"}}},"geo":{"properties":{"id":{"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":{"description":"<p>Whether to show the geo component.</p>\n"},"map":{"description":"<p>Map charts.</p>\n<p>Due to the increase of fineness of map, ECharts 3 doesn&#39;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>&lt;script&gt;</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\">&lt;script src=&quot;echarts.js&quot;&gt;&lt;/script&gt;\n&lt;script src=&quot;map/js/china.js&quot;&gt;&lt;/script&gt;\n&lt;script&gt;\nvar chart = echarts.init(document.getElmentById(&#39;main&#39;));\nchart.setOption({\n    series: [{\n        type: &#39;map&#39;,\n        map: &#39;china&#39;\n    }]\n});\n&lt;/script&gt;\n</code></pre>\n<p><strong> JSON importing example </strong></p>\n<pre><code class=\"lang-js\">$.get(&#39;map/json/china.json&#39;, function (chinaJson) {\n    echarts.registerMap(&#39;china&#39;, chinaJson);\n    var chart = echarts.init(document.getElmentById(&#39;main&#39;));\n    chart.setOption({\n        series: [{\n            type: &#39;map&#39;,\n            map: &#39;china&#39;\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=\"http://echarts.baidu.com/gallery/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a> for more information.</p>\n"},"roam":{"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>&#39;scale&#39;</code> or <code>&#39;move&#39;</code>. Otherwise, set it to be <code>true</code> to enable both.</p>\n"},"center":{"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":{"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"},"boundingCoords":{"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: &#39;world&#39;,\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"},"zoom":{"description":"<p>Zoom rate of current view-port.</p>\n"},"scaleLimit":{"properties":{"min":{"description":"<p>Minimum scaling</p>\n"},"max":{"description":"<p>Maximum scaling</p>\n"}}},"nameMap":{"description":"<p>Name mapping for customized areas. For example:</p>\n<pre><code class=\"lang-js\">{\n    &#39;China&#39; : &#39;中国&#39;\n}\n</code></pre>\n"},"selectedMode":{"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>&#39;single&#39;</code> for selecting single area, or <code>&#39;multiple&#39;</code> for selecting multiple areas.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"areaColor":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"areaColor":{"description":"<p>Area filling color.</p>\n"},"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"layoutCenter":{"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: [&#39;30%&#39;, &#39;30%&#39;],\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"},"layoutSize":{"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":{"items":{"properties":{"name":{"description":"<p>Name of area in map, like <code>&#39;Guangdong&#39;</code>, or <code>&#39;Zhejiang&#39;</code>.</p>\n"},"selected":{"description":"<p>Whether this area is selected.</p>\n"},"itemStyle":{"properties":{"areaColor":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"areaColor":{"description":"<p>Area color in the map.</p>\n"},"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"}}},"parallel":{"properties":{"id":{"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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n"},"width":{"description":"<p>Width of parallel  component. Adaptive by default.</p>\n"},"height":{"description":"<p>Height of parallel  component. Adaptive by default.</p>\n"},"layout":{"description":"<p>Layout modes, whose optional values are:</p>\n<ul>\n<li><p><code>&#39;horizontal&#39;</code>: place each axis horizontally.</p>\n</li>\n<li><p><code>&#39;vertical&#39;</code>: place each axis vertically.</p>\n</li>\n</ul>\n"},"axisExpandable":{"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=\"http://echarts.baidu.com/gallery/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"},"axisExpandCenter":{"description":"<p>Index of the axis which is used as the center of expanding initially. It doesn&#39;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"},"axisExpandCount":{"description":"<p>Defines how many axes are at expanding state initially. We&#39;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"},"axisExpandWidth":{"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"},"axisExpandTriggerOn":{"description":"<p>Optional values:</p>\n<ul>\n<li><code>&#39;click&#39;</code>: Trigger expanding when mouse clicking.</li>\n<li><code>&#39;mousemove&#39;</code>: Trigger expanding when mouse hovering.</li>\n</ul>\n"},"parallelAxisDefault":{"properties":{"type":{"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>&#39;category&#39;</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>&#39;time&#39;</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>&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n"},"name":{"description":"<p>Name of axis.</p>\n"},"nameLocation":{"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code> or <code>&#39;center&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"nameTextStyle":{"properties":{"color":{"description":"<p>Color of axis name uses <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>axis name font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>axis name font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"nameGap":{"description":"<p>Gap between axis name and axis line.</p>\n"},"nameRotate":{"description":"<p>Rotation of axis name.</p>\n"},"inverse":{"description":"<p>Whether axis is inversed. New option from ECharts 3.</p>\n"},"boundaryGap":{"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: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMin&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"max":{"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMax&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"scale":{"description":"<p>It is available only in numerical axis, i.e., <a href=\"#parallelAxis.type\">type</a>: &#39;value&#39;.</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"},"splitNumber":{"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"},"minInterval":{"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#parallelAxis.type\">type</a> is &#39;time&#39;), 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> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"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>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39;.</p>\n"},"silent":{"description":"<p>True for axis that cannot be interacted with.</p>\n"},"triggerEvent":{"description":"<p>Whether the labels of axis triggers and reacts to mouse events.</p>\n<p>Parameters of event includes:</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: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n"},"axisLine":{"properties":{"show":{"description":"<p>Whether to show the axis line or not.</p>\n"},"symbol":{"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&#39;s set to be <code>&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code>&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n"},"symbolSize":{"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"},"symbolOffset":{"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"},"lineStyle":{"properties":{"color":{"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p>line style line width.</p>\n"},"type":{"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the axis tick.</p>\n"},"alignWithLabel":{"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"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"length":{"description":"<p>The length of the axis tick.</p>\n"},"lineStyle":{"properties":{"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":{"description":"<p>axisTick line width.</p>\n"},"type":{"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the label of axis label or not.</p>\n"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"rotate":{"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"},"margin":{"description":"<p>The margin between the axis label and the axis line.</p>\n"},"formatter":{"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: &#39;{value} kg&#39;\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(&#39;/&#39;);\n}\n</code></pre>\n"},"showMinLabel":{"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"},"showMaxLabel":{"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"},"color":{"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) =&gt; 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 &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"data":{"items":{"properties":{"value":{"description":"<p>Name of a category.</p>\n"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"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) =&gt; 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"}}}}}}}}}}}}}},"parallelAxis":{"properties":{"id":{"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":{"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,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\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, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</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":{"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&#39;t have to configure it, whose default value is <code>0</code>.</p>\n"},"realtime":{"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"},"areaSelectStyle":{"properties":{"width":{"description":"<p>Width of selecting box.</p>\n"},"borderWidth":{"description":"<p>Border width of the select box.</p>\n"},"borderColor":{"description":"<p>Border color of the select box.</p>\n"},"color":{"description":"<p>Border fill color of the select box.</p>\n"},"opacity":{"description":"<p>Opacity of the select box.</p>\n"}}},"type":{"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>&#39;category&#39;</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>&#39;time&#39;</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>&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n"},"name":{"description":"<p>Name of axis.</p>\n"},"nameLocation":{"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code> or <code>&#39;center&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"nameTextStyle":{"properties":{"color":{"description":"<p>Color of axis name uses <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>axis name font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>axis name font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"nameGap":{"description":"<p>Gap between axis name and axis line.</p>\n"},"nameRotate":{"description":"<p>Rotation of axis name.</p>\n"},"inverse":{"description":"<p>Whether axis is inversed. New option from ECharts 3.</p>\n"},"boundaryGap":{"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: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMin&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"max":{"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMax&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"scale":{"description":"<p>It is available only in numerical axis, i.e., <a href=\"#parallelAxis.type\">type</a>: &#39;value&#39;.</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"},"splitNumber":{"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"},"minInterval":{"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#parallelAxis.type\">type</a> is &#39;time&#39;), 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> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"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>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#parallelAxis.type\">type</a>: &#39;log&#39;.</p>\n"},"silent":{"description":"<p>True for axis that cannot be interacted with.</p>\n"},"triggerEvent":{"description":"<p>Whether the labels of axis triggers and reacts to mouse events.</p>\n<p>Parameters of event includes:</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: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n"},"axisLine":{"properties":{"show":{"description":"<p>Whether to show the axis line or not.</p>\n"},"symbol":{"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&#39;s set to be <code>&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code>&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n"},"symbolSize":{"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"},"symbolOffset":{"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"},"lineStyle":{"properties":{"color":{"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p>line style line width.</p>\n"},"type":{"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the axis tick.</p>\n"},"alignWithLabel":{"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"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"length":{"description":"<p>The length of the axis tick.</p>\n"},"lineStyle":{"properties":{"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":{"description":"<p>axisTick line width.</p>\n"},"type":{"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the label of axis label or not.</p>\n"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"rotate":{"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"},"margin":{"description":"<p>The margin between the axis label and the axis line.</p>\n"},"formatter":{"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: &#39;{value} kg&#39;\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(&#39;/&#39;);\n}\n</code></pre>\n"},"showMinLabel":{"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"},"showMaxLabel":{"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"},"color":{"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) =&gt; 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 &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"data":{"items":{"properties":{"value":{"description":"<p>Name of a category.</p>\n"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"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) =&gt; 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"}}}}}}}}}}}},"singleAxis":{"properties":{"id":{"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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n"},"width":{"description":"<p>Width of grid  component. Adaptive by default.</p>\n"},"height":{"description":"<p>Height of grid  component. Adaptive by default.</p>\n"},"orient":{"description":"<p>Orientation of the axis. By default, it&#39;s <code>&#39;horizontal&#39;</code>. You can set it to be <code>&#39;vertical&#39;</code> to make a vertical axis.</p>\n"},"type":{"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>&#39;category&#39;</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>&#39;time&#39;</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>&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n"},"name":{"description":"<p>Name of axis.</p>\n"},"nameLocation":{"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code> or <code>&#39;center&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"nameTextStyle":{"properties":{"color":{"description":"<p>Color of axis name uses <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>axis name font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>axis name font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"nameGap":{"description":"<p>Gap between axis name and axis line.</p>\n"},"nameRotate":{"description":"<p>Rotation of axis name.</p>\n"},"inverse":{"description":"<p>Whether axis is inversed. New option from ECharts 3.</p>\n"},"boundaryGap":{"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: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n"},"min":{"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMin&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"max":{"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>&#39;dataMax&#39;</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: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code>2</code> represents <code>&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n"},"scale":{"description":"<p>It is available only in numerical axis, i.e., <a href=\"#singleAxis.type\">type</a>: &#39;value&#39;.</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"},"splitNumber":{"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"},"minInterval":{"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#singleAxis.type\">type</a> is &#39;time&#39;), 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> &#39;value&#39; or &#39;time&#39;.</p>\n"},"interval":{"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>: &#39;time&#39; axis. Logged value should be passed for <a href=\"#singleAxis.type\">type</a>: &#39;log&#39; axis.</p>\n"},"logBase":{"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#singleAxis.type\">type</a>: &#39;log&#39;.</p>\n"},"silent":{"description":"<p>True for axis that cannot be interacted with.</p>\n"},"triggerEvent":{"description":"<p>Whether the labels of axis triggers and reacts to mouse events.</p>\n<p>Parameters of event includes:</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: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n"},"axisLine":{"properties":{"show":{"description":"<p>Whether to show the axis line or not.</p>\n"},"symbol":{"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&#39;s set to be <code>&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code>&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n"},"symbolSize":{"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"},"symbolOffset":{"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"},"lineStyle":{"properties":{"color":{"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p>line style line width.</p>\n"},"type":{"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the axis tick.</p>\n"},"alignWithLabel":{"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"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"length":{"description":"<p>The length of the axis tick.</p>\n"},"lineStyle":{"properties":{"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":{"description":"<p>axisTick line width.</p>\n"},"type":{"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the label of axis label or not.</p>\n"},"interval":{"description":""},"inside":{"description":"<p>Specifies whether the axis label faces Inside. False by default.</p>\n"},"rotate":{"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"},"margin":{"description":"<p>The margin between the axis label and the axis line.</p>\n"},"formatter":{"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: &#39;{value} kg&#39;\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(&#39;/&#39;);\n}\n</code></pre>\n"},"showMinLabel":{"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"},"showMaxLabel":{"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"},"color":{"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) =&gt; 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 &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n"}}}}}}},"splitLine":{"properties":{"show":{"description":"<p>Whether to show the splitLine. Value axes are shown by default, while category axes are not.</p>\n"},"interval":{"description":""},"lineStyle":{"properties":{"color":{"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: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>"},"width":{"description":"<p>splitLine line width.</p>\n"},"type":{"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"interval":{"description":""},"show":{"description":"<p>Whether to show the splitArea.</p>\n"},"areaStyle":{"properties":{"color":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"value":{"description":"<p>Name of a category.</p>\n"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}},"axisPointer":{"properties":{"show":{"description":"<p>axisPointer will not be displayed by default. But if<a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>&#39;axis&#39;</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as  <code>&#39;cross&#39;</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"},"type":{"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> line indicator</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> shadow crosshair indicator</p>\n</li>\n</ul>\n"},"snap":{"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":{"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":{"properties":{"show":{"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>&#39;cross&#39;</code>, label will be displayed automatically.</p>\n"},"precision":{"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n"},"formatter":{"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: &#39;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>&#39;category&#39;</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\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 &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"},"margin":{"description":"<p>Distance between label and axis.</p>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"},"borderColor":{"description":"<p>Border color of label.</p>\n"},"borderWidth":{"description":"<p>Border width of label.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Whether to trigger tooltip.</p>\n"},"value":{"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"},"status":{"description":"<p>Current status, can be <code>&#39;show&#39;</code> 和 <code>&#39;hide&#39;</code>.</p>\n"},"handle":{"properties":{"show":{"description":"<p>Set to <code>true</code> to use handle.</p>\n"},"icon":{"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>See the <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n"},"margin":{"description":"<p>Distance from handle center to axis.</p>\n"},"color":{"description":"<p>The color of the handle.</p>\n"},"throttle":{"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"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"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) =&gt; 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"}}}}},"tooltip":{"properties":{"show":{"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n"},"trigger":{"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code>&#39;axis&#39;</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>&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n"},"axisPointer":{"properties":{"type":{"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>&#39;line&#39;</code> line indicator</p>\n</li>\n<li><p><code>&#39;shadow&#39;</code> shadow crosshair indicator</p>\n</li>\n<li><p><code>&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n"},"axis":{"description":"<p>The coordinate axis, which could be <code>&#39;x&#39;</code>, <code>&#39;y&#39;</code>, <code>&#39;radius&#39;</code>, or <code>&#39;angle&#39;</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"},"snap":{"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":{"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":{"properties":{"show":{"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>&#39;cross&#39;</code>, label will be displayed automatically.</p>\n"},"precision":{"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n"},"formatter":{"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: &#39;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>&#39;category&#39;</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code>{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<pre><code class=\"lang-js\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\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 &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"},"margin":{"description":"<p>Distance between label and axis.</p>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"padding":{"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"},"backgroundColor":{"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n"},"borderColor":{"description":"<p>Border color of label.</p>\n"},"borderWidth":{"description":"<p>Border width of label.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"position":{"description":"<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"timeline":{"properties":{"show":{"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"},"type":{"description":"<p>This attribute has only one valid value as <code>slider</code> by now. You don&#39;t have to change it.</p>\n"},"axisType":{"description":"<p>Type of axis, whose values may be:</p>\n<ul>\n<li><code>&#39;value&#39;</code>\n  Numeric axis, which is suitable for continuous data.</li>\n<li><code>&#39;category&#39;</code>\n  Category axis, which is suitable for category data.</li>\n<li><code>&#39;time&#39;</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"},"currentIndex":{"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"},"autoPlay":{"description":"<p>Whether to play automatically.</p>\n"},"rewind":{"description":"<p>Whether supports playing reversely.</p>\n"},"loop":{"description":"<p>Whether to loop playing.</p>\n"},"playInterval":{"description":"<p>Indicates play speed (gap time between two state), whose unit is millisecond.</p>\n"},"realtime":{"description":"<p>Whether the view updates in real time during dragging the control dot.</p>\n"},"controlPosition":{"description":"<p>Position of the play button, whose valid values are <code>&#39;left&#39;</code> and <code>&#39;right&#39;</code>.</p>\n"},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"padding":{"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"},"orient":{"description":"<p>Orientation of the component, whose valid values are:</p>\n<ul>\n<li><code>&#39;vertical&#39;</code>: vertical layout.</li>\n<li><code>&#39;horizontal&#39;</code>: horizontal layout.</li>\n</ul>\n"},"inverse":{"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"},"symbol":{"description":"<p>Symbol of timeline.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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"},"symbolRotate":{"description":"<p>Rotate degree of timeline symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"show":{"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"},"color":{"description":"<p>timeline Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p>timeline  line width.</p>\n"},"type":{"description":"<p>timeline  line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<p>Configurations:</p>\n<ul>\n<li><p><code>&#39;auto&#39;</code>:\n  Automatic layout.</p>\n</li>\n<li><p><code>&#39;left&#39;</code>:\n  Put it along the left margin.\n  It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>&#39;horizontal&#39;</code> .</p>\n</li>\n<li><p><code>&#39;right&#39;</code>:\n  Put it along the right margin.\n  It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>&#39;horizontal&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;vertical&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;vertical&#39;</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"},"show":{"description":"<p>Whether to show the label.</p>\n"},"interval":{"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"},"rotate":{"description":"<p>Rotation angle of <code>label</code>, in which positive values refer to counter clockwise rotation.</p>\n"},"formatter":{"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: &#39;{value} kg&#39;\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(&#39;/&#39;);\n}\n</code></pre>\n"},"color":{"description":"<p>timeline.lable.normal text color.</p>\n"},"fontStyle":{"description":"<p>timeline.lable.normal font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>timeline.lable.normal font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>timeline.lable.normal font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>timeline.lable.normal font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show the label.</p>\n"},"interval":{"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"},"rotate":{"description":"<p>Rotation angle of <code>label</code>, in which positive values refer to counter clockwise rotation.</p>\n"},"formatter":{"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: &#39;{value} kg&#39;\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(&#39;/&#39;);\n}\n</code></pre>\n"},"color":{"description":"<p>timeline.lable.emphasis text color.</p>\n"},"fontStyle":{"description":"<p>timeline.lable.emphasis font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p>timeline.lable.emphasis font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p>timeline.lable.emphasis font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p>timeline.lable.emphasis font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p>timeline  color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>timeline  border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p>timeline  border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>timeline  color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>timeline  border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p>timeline  border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"symbol":{"description":"<p>Symbol of timeline.checkpointStyle .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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"},"symbolRotate":{"description":"<p>Rotate degree of timeline.checkpointStyle  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"color":{"description":"<p>Color of <code>checkpoint</code> in <code>timeline</code> component.</p>\n"},"borderWidth":{"description":"<p>The border-width of <code>checkpoint</code> in <code>timeline</code> component.</p>\n"},"borderColor":{"description":"<p>The border-color of <code>checkpoint</code> in <code>timeline</code> component.</p>\n"},"animation":{"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"},"animationDuration":{"description":"<p>The animation duration of <code>checkpoint</code> in <code>timeline</code> component.</p>\n"},"animationEasing":{"description":"<p>The easing effect of animation of <code>checkpoint</code> in <code>timeline</code> component. Refers to <a href=\"http://echarts.baidu.com/gallery/view.html?c=line-easing\" target=\"_blank\">easing sample</a> for different easing effects.</p>\n"}}},"controlStyle":{"properties":{"show":{"description":"<p>Whether to show control button. <code>false</code> for hide all.</p>\n"},"showPlayBtn":{"description":"<p>Whether to show play button.</p>\n"},"showPrevBtn":{"description":"<p>Whether to show previous button.</p>\n"},"showNextBtn":{"description":"<p>Whether to show next button.</p>\n"},"itemSize":{"description":"<p>Size of <em>control button</em>, in pixels (px).</p>\n"},"itemGap":{"description":"<p>Interval between <em>control button</em>, in pixels (px).</p>\n"},"position":{"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>&#39;horizontal&#39;</code>, <code>&#39;left&#39;</code> and <code>&#39;right&#39;</code>are valid.</p>\n</li>\n<li><p>When <a href=\"#timeline.orient\">timeline.orient</a> is set to be <code>&#39;vertical&#39;</code>, <code>&#39;top&#39;</code> and <code>&#39;bottom&#39;</code>are valid.</p>\n</li>\n</ul>\n"},"playIcon":{"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>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"stopIcon":{"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>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"prevIcon":{"description":"<p>Icon of <em>previous button</em>.</p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"nextIcon":{"description":"<p>Icon of <em>next button</em>.</p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"color":{"description":"<p>Button color.</p>\n"},"borderColor":{"description":"<p>Color of button border.</p>\n"},"borderWidth":{"description":"<p>Border width of button.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Button color.</p>\n"},"borderColor":{"description":"<p>Color of button border.</p>\n"},"borderWidth":{"description":"<p>Width of button border.</p>\n"}}}}},"data":{"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    &#39;2002-01-01&#39;,\n    &#39;2003-01-01&#39;,\n    &#39;2004-01-01&#39;,\n    {\n        value: &#39;2005-01-01&#39;,\n        tooltip: {          // enables `tooltip` to be displayed as mouse hovering to this item.\n            formatter: &#39;{b} xxxx&#39;\n        },\n        symbol: &#39;diamond&#39;,  // the special setting of this item&#39;s symbol.\n        symbolSize: 16      // the special setting of this item&#39;s size.\n    },\n    &#39;2006-01-01&#39;,\n    &#39;2007-01-01&#39;,\n    &#39;2008-01-01&#39;,\n    &#39;2009-01-01&#39;,\n    &#39;2010-01-01&#39;,\n    {\n        value: &#39;2011-01-01&#39;,\n        tooltip: {          // enables `tooltip` to be displayed as mouse hovering to this item.\n            formatter: function (params) {\n                return params.name + &#39;xxxx&#39;;\n            }\n        },\n        symbol: &#39;diamond&#39;,\n        symbolSize: 18\n    },\n]\n</code></pre>\n"}}},"graphic":{"properties":{"id":{"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":{"items":{"anyOf":[{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"width":{"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: &#39;center&#39;</code>.</p>\n"},"height":{"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: &#39;middle&#39;</code>.</p>\n"},"children":{"description":"<p>A list of children, each item is a declaration of an element.</p>\n"},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}},{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"style":{"properties":{"image":{"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":{"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n"},"y":{"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n"},"width":{"description":"<p>The width of the shape of the element.</p>\n"},"height":{"description":"<p>The height of the shape of the element.</p>\n"},"fill":{"description":"<p>Color filled in this element.</p>\n"},"stroke":{"description":"<p>Color of stroke.</p>\n"},"lineWidth":{"description":"<p>Width of stroke.</p>\n"},"shadowBlur":{"description":"<p>Width of shadow.</p>\n"},"shadowOffsetX":{"description":"<p>X offset of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Y offset of shadow.</p>\n"},"shadowColor":{"description":"<p>color of shadow.</p>\n"}}},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}},{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"style":{"properties":{"text":{"description":"<p>Text content. <code>\\n</code> can be used as a line break.</p>\n"},"x":{"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n"},"y":{"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n"},"font":{"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: &#39;2em &quot;STHeiti&quot;, sans-serif&#39;\n\n// style | weight | size | family\nfont: &#39;italic bolder 16px cursive&#39;\n\n// weight | size | family\nfont: &#39;bolder 2em &quot;Microsoft YaHei&quot;, sans-serif&#39;\n</code></pre>"},"textAlign":{"description":"<p>Text horizontal alignment. Optional values: <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;right&#39;</code>.</p>\n<p><code>&#39;left&#39;</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>&#39;right&#39;</code> means the right side of the text block is specified by <a href=\"#graphic.elements-text.style.y\">style.y</a>.</p>\n"},"textVerticalAlign":{"description":"<p>Text vertical alignment. Optional values: <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;bottom&#39;</code>.</p>\n"},"fill":{"description":"<p>Color filled in this element.</p>\n"},"stroke":{"description":"<p>Color of stroke.</p>\n"},"lineWidth":{"description":"<p>Width of stroke.</p>\n"},"shadowBlur":{"description":"<p>Width of shadow.</p>\n"},"shadowOffsetX":{"description":"<p>X offset of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Y offset of shadow.</p>\n"},"shadowColor":{"description":"<p>color of shadow.</p>\n"}}},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}},{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"shape":{"properties":{"x":{"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n"},"y":{"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n"},"width":{"description":"<p>The width of the shape of the element.</p>\n"},"height":{"description":"<p>The height of the shape of the element.</p>\n"}}},"style":{"properties":{"fill":{"description":"<p>Color filled in this element.</p>\n"},"stroke":{"description":"<p>Color of stroke.</p>\n"},"lineWidth":{"description":"<p>Width of stroke.</p>\n"},"shadowBlur":{"description":"<p>Width of shadow.</p>\n"},"shadowOffsetX":{"description":"<p>X offset of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Y offset of shadow.</p>\n"},"shadowColor":{"description":"<p>color of shadow.</p>\n"}}},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}},{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"shape":{"properties":{"cx":{"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n"},"cy":{"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n"},"r":{"description":"<p>Outside radius.</p>\n"}}},"style":{"properties":{"fill":{"description":"<p>Color filled in this element.</p>\n"},"stroke":{"description":"<p>Color of stroke.</p>\n"},"lineWidth":{"description":"<p>Width of stroke.</p>\n"},"shadowBlur":{"description":"<p>Width of shadow.</p>\n"},"shadowOffsetX":{"description":"<p>X offset of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Y offset of shadow.</p>\n"},"shadowColor":{"description":"<p>color of shadow.</p>\n"}}},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}},{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"shape":{"properties":{"cx":{"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n"},"cy":{"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n"},"r":{"description":"<p>Outside radius.</p>\n"},"r0":{"description":"<p>Inside radius.</p>\n"}}},"style":{"properties":{"fill":{"description":"<p>Color filled in this element.</p>\n"},"stroke":{"description":"<p>Color of stroke.</p>\n"},"lineWidth":{"description":"<p>Width of stroke.</p>\n"},"shadowBlur":{"description":"<p>Width of shadow.</p>\n"},"shadowOffsetX":{"description":"<p>X offset of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Y offset of shadow.</p>\n"},"shadowColor":{"description":"<p>color of shadow.</p>\n"}}},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}},{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"shape":{"properties":{"cx":{"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n"},"cy":{"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n"},"r":{"description":"<p>Outside radius.</p>\n"},"r0":{"description":"<p>Inside radius.</p>\n"},"startAngle":{"description":"<p>start angle, in radian.</p>\n"},"endAngle":{"description":"<p>end anble, in radian.</p>\n"},"clockwise":{"description":"<p>Whether draw clockwise.</p>\n"}}},"style":{"properties":{"fill":{"description":"<p>Color filled in this element.</p>\n"},"stroke":{"description":"<p>Color of stroke.</p>\n"},"lineWidth":{"description":"<p>Width of stroke.</p>\n"},"shadowBlur":{"description":"<p>Width of shadow.</p>\n"},"shadowOffsetX":{"description":"<p>X offset of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Y offset of shadow.</p>\n"},"shadowColor":{"description":"<p>color of shadow.</p>\n"}}},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}},{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"shape":{"properties":{"cx":{"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n"},"cy":{"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n"},"r":{"description":"<p>Outside radius.</p>\n"},"r0":{"description":"<p>Inside radius.</p>\n"},"startAngle":{"description":"<p>start angle, in radian.</p>\n"},"endAngle":{"description":"<p>end anble, in radian.</p>\n"},"clockwise":{"description":"<p>Whether draw clockwise.</p>\n"}}},"style":{"properties":{"fill":{"description":"<p>Color filled in this element.</p>\n"},"stroke":{"description":"<p>Color of stroke.</p>\n"},"lineWidth":{"description":"<p>Width of stroke.</p>\n"},"shadowBlur":{"description":"<p>Width of shadow.</p>\n"},"shadowOffsetX":{"description":"<p>X offset of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Y offset of shadow.</p>\n"},"shadowColor":{"description":"<p>color of shadow.</p>\n"}}},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}},{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"shape":{"properties":{"points":{"description":"<p>A list of points, which defines the shape, like <code>[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"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>&#39;spline&#39;</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n"},"smoothConstraint":{"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"}}},"style":{"properties":{"fill":{"description":"<p>Color filled in this element.</p>\n"},"stroke":{"description":"<p>Color of stroke.</p>\n"},"lineWidth":{"description":"<p>Width of stroke.</p>\n"},"shadowBlur":{"description":"<p>Width of shadow.</p>\n"},"shadowOffsetX":{"description":"<p>X offset of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Y offset of shadow.</p>\n"},"shadowColor":{"description":"<p>color of shadow.</p>\n"}}},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}},{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"shape":{"properties":{"points":{"description":"<p>A list of points, which defines the shape, like <code>[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"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>&#39;spline&#39;</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n"},"smoothConstraint":{"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"}}},"style":{"properties":{"fill":{"description":"<p>Color filled in this element.</p>\n"},"stroke":{"description":"<p>Color of stroke.</p>\n"},"lineWidth":{"description":"<p>Width of stroke.</p>\n"},"shadowBlur":{"description":"<p>Width of shadow.</p>\n"},"shadowOffsetX":{"description":"<p>X offset of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Y offset of shadow.</p>\n"},"shadowColor":{"description":"<p>color of shadow.</p>\n"}}},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}},{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"shape":{"properties":{"x1":{"description":"<p>x value of the start point.</p>\n"},"y1":{"description":"<p>y value of the start point.</p>\n"},"x2":{"description":"<p>x value of the end point.</p>\n"},"y2":{"description":"<p>y value of the end point.</p>\n"},"percent":{"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n"}}},"style":{"properties":{"fill":{"description":"<p>Color filled in this element.</p>\n"},"stroke":{"description":"<p>Color of stroke.</p>\n"},"lineWidth":{"description":"<p>Width of stroke.</p>\n"},"shadowBlur":{"description":"<p>Width of shadow.</p>\n"},"shadowOffsetX":{"description":"<p>X offset of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Y offset of shadow.</p>\n"},"shadowColor":{"description":"<p>color of shadow.</p>\n"}}},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}},{"properties":{"type":{"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"},"id":{"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"},"$action":{"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new elemnt.</li>\n<li><code>&#39;replace&#39;</code>: create a new element accordint to the given option and replace the existing element (if any).</li>\n<li><code>&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n"},"left":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"right":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>&#39;center&#39;</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.left\">left</a> and <a href=\"#graphic.elements.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements.left\">left</a> or <a href=\"#graphic.elements.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n"},"top":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bottom":{"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>&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>&#39;middle&#39;</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.top\">top</a> and <a href=\"#graphic.elements.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements.top\">top</a> or <a href=\"#graphic.elements.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n"},"bounding":{"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=\"http://echarts.baidu.com/gallery/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>&#39;all&#39;</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>&#39;raw&#39;</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"},"z":{"description":"<p>z value of the elements, determine the overlap order.</p>\n"},"zlevel":{"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n"},"silent":{"description":"<p>Whether response to mouse events / touch events.</p>\n"},"invisible":{"description":"<p>Whether the element is visible.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"draggable":{"description":"<p>Can be dragged or not.</p>\n"},"progressive":{"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n"},"shape":{"properties":{"x1":{"description":"<p>x value of the start point.</p>\n"},"y1":{"description":"<p>y value of the start point.</p>\n"},"x2":{"description":"<p>x value of the end point.</p>\n"},"y2":{"description":"<p>y value of the end point.</p>\n"},"cpx1":{"description":"<p>x of control point.</p>\n"},"cpy1":{"description":"<p>y of control point.</p>\n"},"cpx2":{"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"},"cpy2":{"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"},"percent":{"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n"}}},"style":{"properties":{"fill":{"description":"<p>Color filled in this element.</p>\n"},"stroke":{"description":"<p>Color of stroke.</p>\n"},"lineWidth":{"description":"<p>Width of stroke.</p>\n"},"shadowBlur":{"description":"<p>Width of shadow.</p>\n"},"shadowOffsetX":{"description":"<p>X offset of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Y offset of shadow.</p>\n"},"shadowColor":{"description":"<p>color of shadow.</p>\n"}}},"onclick":{"description":""},"onmouseover":{"description":""},"onmouseout":{"description":""},"onmousemove":{"description":""},"onmousewheel":{"description":""},"onmousedown":{"description":""},"onmouseup":{"description":""},"ondrag":{"description":""},"ondragstart":{"description":""},"ondragend":{"description":""},"ondragenter":{"description":""},"ondragleave":{"description":""},"ondragover":{"description":""},"ondrop":{"description":""}}}]}}}},"calendar":{"properties":{"id":{"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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"width":{"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"},"height":{"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"},"range":{"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: &#39;2017-02&#39;\n\n//  a range\nrange: [&#39;2017-01-02&#39;, &#39;2017-02-23&#39;]\n\n// note: they will be identified as [&#39;2017-01-01&#39;, &#39;2017-02-01&#39;]\nrange: [&#39;2017-01&#39;, &#39;2017-02&#39;]\n</code></pre>\n"},"cellSize":{"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: &#39;auto&#39;\n\n// Set the width to be self-adaptation, and height to be 40\ncellSize: [&#39;auto&#39;, 40]\n</code></pre>\n"},"orient":{"description":"<p>The layout orientation of calendar.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n"},"splitLine":{"properties":{"show":{"description":"<p>Whether to show the splitLine.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>splitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p>splitLine line width.</p>\n"},"type":{"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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: &#39;#000&#39;,\n            width: 1,\n            type: &#39;solid&#39;\n        }\n    }\n}]\n</code></pre>\n"}}}}},"itemStyle":{"properties":{"color":{"description":"<p>calendar color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>calendar border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p>calendar border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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: &#39;#fff&#39;,\n        borderWidth: 1,\n        borderColor: &#39;#ccc&#39;\n    }\n}]\n</code></pre>\n"}}},"dayLabel":{"properties":{"show":{"description":"<p>Whether to show the dayLabel.</p>\n"},"firstDay":{"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"},"margin":{"description":"<p>The margin between the day label and the axis line.</p>\n"},"position":{"description":"<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;start&#39;</li>\n<li>&#39;end&#39;</li>\n</ul>\n"},"nameMap":{"description":"<p>Week text content, defaults to &#39;en&#39;;\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  [&#39;S&#39;, &#39;M&#39;, &#39;T&#39;, &#39;W&#39;, &#39;T&#39;, &#39;F&#39;, &#39;S&#39;],\nnameMap: &#39;en&#39;\n\n// shortcut to Chinese [&#39;日&#39;, &#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;]\nnameMap: &#39;cn&#39;\n\n// Custom settings: mixed in English and Chinese or not displayed\nnameMap: [&#39;S&#39;, &#39;一&#39;, &#39;T&#39;, &#39;三&#39;, &#39;&#39;, &#39;五&#39;, &#39;S&#39;],\n\ncalendar: [{\n    dayLabel: {\n        nameMap: &#39;en&#39;\n    }\n}]\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"monthLabel":{"properties":{"show":{"description":"<p>Whether to show monthLabel.</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>The margin between the month label and the axis line.</p>\n"},"position":{"description":"<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;start&#39;</li>\n<li>&#39;end&#39;</li>\n</ul>\n"},"nameMap":{"description":"<p>Month text content, defaults to &#39;en&#39;;\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                &#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;,\n                &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;,\n                &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;,\n                &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;\n            ],\nnameMap: &#39;en&#39;\n\n// Shortcut to Chinese [\n                &#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;,\n                &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;,\n                &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;,\n                &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;\n            ]\nnameMap: &#39;cn&#39;\n\n// Custom settings: mixed in English and Chinese or not displayed\nnameMap: [\n            &#39;一月&#39;, &#39;Feb&#39;, &#39;三月&#39;,\n            &#39;四月&#39;, &#39;May&#39;, &#39;六月&#39;,\n            &#39;七月&#39;, &#39;八月&#39;, &#39;&#39;,\n            &#39;十月&#39;, &#39;Nov&#39;, &#39;十二月&#39;\n        ],\n\n\ncalendar: [{\n    monthLabel: {\n        nameMap: &#39;en&#39;\n    }\n}]\n</code></pre>\n"},"formatter":{"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：&#39;Feb&#39;\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: &#39;{yyyy}-{MM}&#39;\n\n// Use callback function;\n/*\n    function parameters:\n    param.nameMap default nameMap eg：&#39;Feb&#39;\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"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"yearLabel":{"properties":{"show":{"description":"<p>Whether to show yearLabel.</p>\n"},"margin":{"description":"<p>The margin between the month label and the axis line.</p>\n"},"position":{"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>&#39;top&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n</ul>\n"},"formatter":{"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: [&#39;2017-10-11&#39;, &#39;2018-01-21&#39;]\n/*\n    template variables:\n    {nameMap} default nameMap eg：&#39;2017-2018&#39;\n    {start}   start year eg: 2017\n    {end}   end year eg: 2018\n*/\n\nformatter: &#39;{start}-{end}&#39;\n\n// Use callback function;\n/*\n    function parameters:\n    param.nameMap default nameMap eg：&#39;2017-2018&#39;\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"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"}}},"dataset":{"properties":{"id":{"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":{"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    [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n    [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n    [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n    [&#39;Walnut Brownie&#39;, 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: &#39;Matcha Latte&#39;, count: 823, score: 95.8},\n    {product: &#39;Milk Tea&#39;, count: 235, score: 81.4},\n    {product: &#39;Cheese Cocoa&#39;, count: 1042, score: 91.2},\n    {product: &#39;Walnut Brownie&#39;, 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    &#39;product&#39;: [&#39;Matcha Latte&#39;, &#39;Milk Tea&#39;, &#39;Cheese Cocoa&#39;, &#39;Walnut Brownie&#39;],\n    &#39;count&#39;: [823, 235, 1042, 988],\n    &#39;score&#39;: [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":{"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            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\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>&#39;someName&#39;</code>, which equals to <code>{name: &#39;someName&#39;}</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":{"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: &quot;the first row/column&quot; means that if <a href=\"#series.seriesLayoutBy\">series.seriesLayoutBy</a> is set as <code>&#39;column&#39;</code>, pick the first row, otherwise, if it is set as <code>&#39;row&#39;</code>, pick the first column.</p>\n"}}},"aria":{"properties":{"show":{"description":"<p>Whether to enable ARIA. When enabled, there should be an <code>aria-label</code> label.</p>\n"},"description":{"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"},"general":{"properties":{"withTitle":{"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"},"withoutTitle":{"description":"<p>If <a href=\"#title.text\">title.text</a> does not exist, then this is used.</p>\n"}}},"series":{"properties":{"maxCount":{"description":"<p>Maximum series number.</p>\n"},"single":{"properties":{"prefix":{"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"},"withName":{"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"},"withoutName":{"description":"<p>If chart doesn&#39;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"}}},"multiple":{"properties":{"prefix":{"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"},"withName":{"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"},"withoutName":{"description":"<p>If series doesn&#39;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"},"separator":{"properties":{"middle":{"description":"<p>Separators other than the last one.</p>\n"},"end":{"description":"<p>The last series seperator.</p>\n"}}}}}}},"data":{"properties":{"maxCount":{"description":"<p>Maximum data number.</p>\n"},"allData":{"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"},"partialData":{"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"},"withName":{"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"},"withoutName":{"description":"<p>If data doesn&#39;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"},"separator":{"properties":{"middle":{"description":"<p>Separators other than the last one.</p>\n"},"end":{"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"}}}}}}},"series":{"items":{"anyOf":[{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>&#39;cartesian2d&#39;</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>&#39;polar&#39;</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"},"xAxisIndex":{"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"},"yAxisIndex":{"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"},"polarIndex":{"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"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"showSymbol":{"description":"<p>Whether to show symbol. It would be shown during tooltip hover.</p>\n"},"showAllSymbol":{"description":"<p>Symbols are shown when label of main axis is shown. Which means it has same interval strategy with <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a>.</p>\n<p>If you want to show them all, set this property as <code>true</code>.</p>\n"},"hoverAnimation":{"description":"<p>Whether to enable the animation effect when mouse is on the symbol.</p>\n"},"legendHoverLink":{"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n"},"stack":{"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=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/line-stack-tiled&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"clipOverflow":{"description":"<p>Whether to clip the overflowing part, which defaults to clip.</p>\n"},"connectNulls":{"description":"<p>Whether to connect the line across null points.</p>\n"},"step":{"description":"<p>Whether to show as a step line. It can be <code>true</code>, <code>false</code>. Or <code>&#39;start&#39;</code>, <code>&#39;middle&#39;</code>, <code>&#39;end&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=line-step&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // 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) =&gt; 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"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"origin":{"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>&#39;auto&#39;</code> (default), <code>&#39;start&#39;</code>, <code>&#39;end&#39;</code>.</p>\n<ul>\n<li><code>&#39;auto&#39;</code> to fill between axis line to data;</li>\n<li><code>&#39;start&#39;</code> to fill between min axis value (when not <code>inverse</code>) to data;</li>\n<li><code>&#39;end&#39;</code> to fill between max axis value (when not <code>inverse</code>) to data;</li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"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"},"smoothMonotone":{"description":"<p>Whether the broken line keep the monotonicity when it is smoothed. It can be set as <code>&#39;x&#39;</code>, <code>&#39;y&#39;</code> to keep the monotonicity on x axis or y axis. Or it can be set to be <code>&#39;none&#39;</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>&#39;none&#39;</code>. Here&#39;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&#39; 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&#39;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>&#39;y&#39;</code>. If data is non-monotone, it should be set to be <code>&#39;none&#39;</code> to use the old algorithm.</p>\n"},"sampling":{"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>&#39;average&#39;</code> Use average value of filter points</li>\n<li><code>&#39;max&#39;</code> Use maximum value of filter points</li>\n<li><code>&#39;min&#39;</code> Use minimum value of filter points</li>\n<li><code>&#39;sum&#39;</code> Use sum of filter points</li>\n</ul>\n"},"dimensions":{"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            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\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>&#39;someName&#39;</code>, which equals to <code>{name: &#39;someName&#39;}</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":{"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: &#39;xxx&#39;,\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>Attributes of encode are different according to the type of coordinate systtems.\nFor <a href=\"#grid\">cartesian2d</a>, <code>x</code> and <code>y</code> can be defined.\nFor <a href=\"#polar\">polar</a>, <code>radius</code> and <code>angle</code> can be defined.\nFor <a href=\"#geo\">geo</a>, <code>lng</code> and <code>lat</code> can be defined.\nAttribute <code>tooltip</code> and <code>itemName</code> (data item name in tooltip) are always able to be defined.</p>\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: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n"},"seriesLayoutBy":{"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 &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：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"},"datasetIndex":{"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"},"data":{"items":{"properties":{"name":{"description":"<p>The name of data item.</p>\n"},"value":{"description":"<p>The value of a single data item.</p>\n"},"symbol":{"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of single data symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p>Bar color..</p>\n"},"barBorderColor":{"description":"<p>The bodrder color of bar.</p>\n"},"barBorderWidth":{"description":"<p>The bodrder width of bar. defaults to have no border.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Bar color..</p>\n"},"barBorderColor":{"description":"<p>The bodrder color of bar.</p>\n"},"barBorderWidth":{"description":"<p>The bodrder width of bar. defaults to have no border.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n"},"coordinateSystem":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>&#39;cartesian2d&#39;</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"},"xAxisIndex":{"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"},"yAxisIndex":{"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"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p>Bar color. defaults to acquire colors from global palette <a href=\"#color\">option.color</a> .</p>\n"},"barBorderColor":{"description":"<p>The bodrder color of bar.</p>\n"},"barBorderWidth":{"description":"<p>The bodrder width of bar. defaults to have no border.</p>\n"},"barBorderRadius":{"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>"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Bar color..</p>\n"},"barBorderColor":{"description":"<p>The bodrder color of bar.</p>\n"},"barBorderWidth":{"description":"<p>The bodrder width of bar. defaults to have no border.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"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"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"barWidth":{"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>&#39;bar&#39;</code> series. This attribute should be set on the last <code>&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code>&#39;bar&#39;</code> series in the coordinate system.</p>\n"},"barMaxWidth":{"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>&#39;bar&#39;</code> series. This attribute should be set on the last <code>&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code>&#39;bar&#39;</code> series in the coordinate system.</p>\n"},"barMinHeight":{"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"},"barGap":{"description":"<p>The gap between bars, can be set as a fixed value like <code>20</code>, or a percent value like <code>&#39;30%&#39;</code>, which means <code>30%</code> of the bar width.</p>\n<p>Set barGap as <code>&#39;-100%&#39;</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>&#39;bar&#39;</code> series. This attribute should be set on the last <code>&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code>&#39;bar&#39;</code> series in the coordinate system.</p>\n<p>For example:</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/barGrid-barGap&reset=1&edit=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n"},"barCategoryGap":{"description":"<p>The bar gap between each category of bar, 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>&#39;bar&#39;</code> series. This attribute should be set on the last <code>&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code>&#39;bar&#39;</code> series in the coordinate system.</p>\n"},"dimensions":{"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            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\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>&#39;someName&#39;</code>, which equals to <code>{name: &#39;someName&#39;}</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":{"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: &#39;xxx&#39;,\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>Attributes of encode are different according to the type of coordinate systtems.\nFor <a href=\"#grid\">cartesian2d</a>, <code>x</code> and <code>y</code> can be defined.\nFor <a href=\"#polar\">polar</a>, <code>radius</code> and <code>angle</code> can be defined.\nFor <a href=\"#geo\">geo</a>, <code>lng</code> and <code>lat</code> can be defined.\nAttribute <code>tooltip</code> and <code>itemName</code> (data item name in tooltip) are always able to be defined.</p>\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: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n"},"seriesLayoutBy":{"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 &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：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"},"datasetIndex":{"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"},"data":{"items":{"properties":{"name":{"description":"<p>The name of data item.</p>\n"},"value":{"description":"<p>The value of a single data item.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p>Bar color..</p>\n"},"barBorderColor":{"description":"<p>The bodrder color of bar.</p>\n"},"barBorderWidth":{"description":"<p>The bodrder width of bar. defaults to have no border.</p>\n"},"barBorderRadius":{"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>"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Bar color..</p>\n"},"barBorderColor":{"description":"<p>The bodrder color of bar.</p>\n"},"barBorderWidth":{"description":"<p>The bodrder width of bar. defaults to have no border.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n"},"hoverAnimation":{"description":"<p>Whether to enable the zoom animation effects when hovering sectors.</p>\n"},"hoverOffset":{"description":"<p>The offset distance of hovered sector.</p>\n"},"selectedMode":{"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>&#39;single&#39;</code> or <code>&#39;multiple&#39;</code>, for single selection and multiple selection.</p>\n"},"selectedOffset":{"description":"<p>The offset distance of selected sector.</p>\n"},"clockwise":{"description":"<p>Whether the layout of sectors of pie chart is clockwise.</p>\n"},"startAngle":{"description":"<p>The start angle, which range is [0, 360].</p>\n"},"minAngle":{"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"},"roseType":{"description":"<p>Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:</p>\n<ul>\n<li><code>&#39;radius&#39;</code> Use central angle to show the percentage of data, radius to show data size.</li>\n<li><code>&#39;area&#39;</code> All the sectors will share the same central angle, the data size is shown only through radiuses.</li>\n</ul>\n"},"avoidLabelOverlap":{"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"},"stillShowZeroSum":{"description":"<p>Whether to show sector when all data are zero.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"label":{"properties":{"show":{"description":""},"position":{"description":"<p>The position of label.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code>&#39;outside&#39;</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>&#39;inside&#39;</code></p>\n<p>  Inside the sectors of pie chart.</p>\n</li>\n<li><p><code>&#39;inner&#39;</code> is the same with <code>&#39;inside&#39;</code>.</p>\n</li>\n<li><p><code>&#39;center&#39;</code></p>\n<p>  In the center of pie chart. See <a href=\"http://echarts.baidu.com/gallery/editor.html?c=pie-doughnut\" target=\"_blank\">pie-doughnut example</a></p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":""},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"labelLine":{"properties":{"show":{"description":"<p>Whether to show the visual guide ine.</p>\n"},"length":{"description":"<p>The length of the first segment of visual guide line.</p>\n"},"length2":{"description":"<p>The length of the second segment of visual guide line.</p>\n"},"smooth":{"description":"<p>Whether to smooth the visual guide line. It defaults to be unsmooth and can be set as <code>true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the visual guide line in emphasis status.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // 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) =&gt; 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"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"center":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>"},"radius":{"description":"<p>Radius of Pie chart, the first of which is inner radius, and the second is outer radius.</p>\n<p>Percentage is supported. When set in percentage, it&#39;s relative to the smaller size between height and width of the container. </p>\n<p>You can set a large inner radius for a Donut chart.</p>\n"},"seriesLayoutBy":{"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 &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：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"},"datasetIndex":{"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"},"data":{"items":{"properties":{"name":{"description":"<p>The name of data item.</p>\n"},"value":{"description":"<p>Data value.</p>\n"},"selected":{"description":"<p>Whether the data item is selected.</p>\n"},"label":{"properties":{"show":{"description":""},"position":{"description":"<p>The position of label.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code>&#39;outside&#39;</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>&#39;inside&#39;</code></p>\n<p>  Inside the sectors of pie chart.</p>\n</li>\n<li><p><code>&#39;inner&#39;</code> is the same with <code>&#39;inside&#39;</code>.</p>\n</li>\n<li><p><code>&#39;center&#39;</code></p>\n<p>  In the center of pie chart. See <a href=\"http://echarts.baidu.com/gallery/editor.html?c=pie-doughnut\" target=\"_blank\">pie-doughnut example</a></p>\n</li>\n</ul>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":""},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"labelLine":{"properties":{"show":{"description":"<p>Whether to show the visual guide ine.</p>\n"},"length":{"description":"<p>The length of the first segment of visual guide line.</p>\n"},"length2":{"description":"<p>The length of the second segment of visual guide line.</p>\n"},"smooth":{"description":"<p>Whether to smooth the visual guide line. It defaults to be unsmooth and can be set as <code>true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the visual guide line in emphasis status.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"animationType":{"description":"<p>Initial animation type.</p>\n<ul>\n<li><code>&#39;expansion&#39;</code> Default expansion animation.</li>\n<li><code>&#39;scale&#39;</code> Scale animation. You can use it with <code>animationEasing=&#39;elasticOut&#39;</code> to have popup effect.</li>\n</ul>\n"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>&#39;cartesian2d&#39;</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>&#39;polar&#39;</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>&#39;geo&#39;</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"},"xAxisIndex":{"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"},"yAxisIndex":{"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"},"polarIndex":{"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"},"geoIndex":{"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"},"calendarIndex":{"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"},"hoverAnimation":{"description":"<p>Whether to enable the animation effect when mouse is on the symbol.</p>\n"},"legendHoverLink":{"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"large":{"description":"<p>Whether to enable the optimization of large-scale scatter graph. It could be enabled when there is a particularly large number of data(&gt;=5k) .</p>\n<p>After being enabled, <a href=\"#series-scatter.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&#39;t be customided.</p>\n"},"largeThreshold":{"description":"<p>The threshold enabling the drawing optimization.</p>\n"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // 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) =&gt; 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"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"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            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\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>&#39;someName&#39;</code>, which equals to <code>{name: &#39;someName&#39;}</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":{"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: &#39;xxx&#39;,\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>Attributes of encode are different according to the type of coordinate systtems.\nFor <a href=\"#grid\">cartesian2d</a>, <code>x</code> and <code>y</code> can be defined.\nFor <a href=\"#polar\">polar</a>, <code>radius</code> and <code>angle</code> can be defined.\nFor <a href=\"#geo\">geo</a>, <code>lng</code> and <code>lat</code> can be defined.\nAttribute <code>tooltip</code> and <code>itemName</code> (data item name in tooltip) are always able to be defined.</p>\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: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n"},"seriesLayoutBy":{"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 &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：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"},"datasetIndex":{"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"},"data":{"items":{"properties":{"name":{"description":"<p>the name of data item.</p>\n"},"value":{"description":"<p>the value of data item.</p>\n"},"symbol":{"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of single data symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n"},"effectType":{"description":"<p>Type of effect. Only ripple effect of <code>&#39;ripple&#39;</code> is supported currently.</p>\n"},"showEffectOn":{"description":"<p>When to show the effect.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>&#39;render&#39;</code> Show the effect when rendering is done.</li>\n<li><code>&#39;emphasis&#39;</code> Show the effect when it is highlight (hover).</li>\n</ul>\n"},"rippleEffect":{"properties":{"period":{"description":"<p>The duration of animation.</p>\n"},"scale":{"description":"<p>The maximum zooming scale of ripples in animation.</p>\n"},"brushType":{"description":"<p>The brush type for ripples. options: <code>&#39;stroke&#39;</code> and <code>&#39;fill&#39;</code>.</p>\n"}}},"coordinateSystem":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>&#39;cartesian2d&#39;</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>&#39;polar&#39;</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>&#39;geo&#39;</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"},"xAxisIndex":{"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"},"yAxisIndex":{"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"},"polarIndex":{"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"},"geoIndex":{"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"},"calendarIndex":{"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"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // 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) =&gt; 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"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"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            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\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>&#39;someName&#39;</code>, which equals to <code>{name: &#39;someName&#39;}</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":{"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: &#39;xxx&#39;,\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>Attributes of encode are different according to the type of coordinate systtems.\nFor <a href=\"#grid\">cartesian2d</a>, <code>x</code> and <code>y</code> can be defined.\nFor <a href=\"#polar\">polar</a>, <code>radius</code> and <code>angle</code> can be defined.\nFor <a href=\"#geo\">geo</a>, <code>lng</code> and <code>lat</code> can be defined.\nAttribute <code>tooltip</code> and <code>itemName</code> (data item name in tooltip) are always able to be defined.</p>\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: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n"},"seriesLayoutBy":{"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 &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：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"},"datasetIndex":{"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"},"data":{"items":{"properties":{"symbol":{"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of single data symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>Index of <a href=\"#radar\">radar</a> component that radar chart uses.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // 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) =&gt; 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"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Data item name</p>\n"},"value":{"description":"<p>Numerical value of a single data item.</p>\n"},"symbol":{"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of single data symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p>Bar color..</p>\n"},"barBorderColor":{"description":"<p>The bodrder color of bar.</p>\n"},"barBorderWidth":{"description":"<p>The bodrder width of bar. defaults to have no border.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Bar color..</p>\n"},"barBorderColor":{"description":"<p>The bodrder color of bar.</p>\n"},"barBorderWidth":{"description":"<p>The bodrder width of bar. defaults to have no border.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n"},"width":{"description":"<p>Width of tree component. </p>\n"},"height":{"description":"<p>Height of tree component. </p>\n"},"layout":{"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=\"http://echarts.baidu.com/gallery/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=\"http://echarts.baidu.com/gallery/view.html?c=tree-radial&edit=1&reset=1\" width=\"800\" height=\"800\" ></iframe>\n\n\n"},"orient":{"description":"<p>The direction of the <code>orthogonal</code> layout in the tree diagram. That means this configuration takes effect only if <code>layout = &#39;orthogonal&#39;</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>&#39;LR&#39;</code>, <code>&#39;RL&#39;</code>, <code>&#39;TB&#39;</code>, <code>&#39;BT&#39;</code>. \n<strong>Note: The previous configuration value <code>&#39;horizontal&#39;</code> is equivalent to <code>&#39;LR&#39;</code>, <code>&#39;vertical&#39;</code> is equivalent to <code>&#39;TB&#39;</code>.</strong></p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"expandAndCollapse":{"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"},"initialTreeDepth":{"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"},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"lineStyle":{"properties":{"color":{"description":"<p>The color of the tree edge.</p>\n"},"width":{"description":"<p>The width of the tree edge.</p>\n"},"curveness":{"description":"<p>The curvature of the tree edge.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>The color of the tree edge.</p>\n"},"width":{"description":"<p>The width of the tree edge.</p>\n"},"curveness":{"description":"<p>The curvature of the tree edge.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}}}},"leaves":{"properties":{"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"name":{"description":"<p>The name of the tree node, used to identify each node.</p>\n"},"value":{"description":"<p>The value of the node, displayed in the tooltip.</p>\n"},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"tooltip":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"width":{"description":"<p>Width of treemap  component. </p>\n"},"height":{"description":"<p>Height of treemap  component. </p>\n"},"squareRatio":{"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":{"description":"<p>When <code>leafDepth</code> is set, the feature &quot;drill down&quot; 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 &quot;drill down&quot; is disabled.</p>\n<p><strong>An example about drill down:</strong></p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=treemap-drill-down&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n"},"drillDownIcon":{"description":"<p>Marker when the node is able to be drilled down.</p>\n"},"roam":{"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>&#39;scale&#39;</code> or <code>&#39;zoom&#39;</code>: zoom only.</li>\n<li><code>&#39;move&#39;</code> or <code>&#39;pan&#39;</code>: move (translation) only.</li>\n<li><code>true</code>: both zoom and move (translation) are avaliable.</li>\n</ul>\n"},"nodeClick":{"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>&#39;zoomToNode&#39;</code>: Zoom to clicked node.</li>\n<li><code>&#39;link&#39;</code>: If there is <a href=\"#series-treemap.data.link\">link</a> in node data, do hyperlink jump after clicked.</li>\n</ul>\n"},"zoomToNodeRatio":{"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>&#39;zoomToNode&#39;</code> and no drill down happens). This configuration item indicates the ratio.</p>\n"},"levels":{"items":{"properties":{"visualDimension":{"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 &quot;dimension&quot;. <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"},"visualMin":{"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>&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n"},"visualMax":{"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>&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n"},"color":{"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":{"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"},"colorSaturation":{"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"},"colorMappingBy":{"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>&#39;value&#39;</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>&#39;index&#39;</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>&#39;id&#39;</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=\"http://echarts.baidu.com/gallery/editor.html?c=treemap-obama&amp;edit=1&amp;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"},"visibleMin":{"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"},"childrenVisibleMin":{"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"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"}}}}},"upperLabel":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of label area.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"}}}}},"itemStyle":{"properties":{"color":{"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n"},"colorAlpha":{"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n"},"colorSaturation":{"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n"},"borderWidth":{"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"},"gapWidth":{"description":"<p>Gaps between child nodes.</p>\n"},"borderColor":{"description":"<p>The border color and gap color of a node.</p>\n"},"borderColorSaturation":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;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"},"strokeColor":{"description":"<p>Stroke color of each rect.</p>\n"},"strokeWidth":{"description":"<p>Stroke width of each rect.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n"}}}}}}}},"silent":{"properties":{"link":{"description":"<p>Enable hyperlink jump when clicking on node. It is avaliable when <a href=\"#series-treemap.nodeClick\">series-treemap.nodeClick</a> is <code>&#39;link&#39;</code>.</p>\n<p>See <a href=\"#series-treemap.data.target\">series-treemap.data.target</a>.</p>\n"},"target":{"description":"<p>The same meaning as <code>target</code> in <code>html</code> <code>&lt;a&gt;</code> label, See <a href=\"#series-treemap.data.link\">series-treemap.data.link</a>. Option values are: <code>&#39;blank&#39;</code> or <code>&#39;self&#39;</code>.</p>\n"},"children":{"description":"<p>child nodes, recursive definition, configurations are the same as <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n"},"tooltip":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},"visualDimension":{"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 &quot;dimension&quot;. <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"},"visualMin":{"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>&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n"},"visualMax":{"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>&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n"},"colorAlpha":{"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"},"colorSaturation":{"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"},"colorMappingBy":{"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>&#39;value&#39;</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>&#39;index&#39;</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>&#39;id&#39;</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=\"http://echarts.baidu.com/gallery/editor.html?c=treemap-obama&amp;edit=1&amp;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"},"visibleMin":{"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"},"childrenVisibleMin":{"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"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"}}}}},"upperLabel":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of label area.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"}}}}},"itemStyle":{"properties":{"color":{"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n"},"colorAlpha":{"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n"},"colorSaturation":{"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n"},"borderWidth":{"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"},"gapWidth":{"description":"<p>Gaps between child nodes.</p>\n"},"borderColor":{"description":"<p>The border color and gap color of a node.</p>\n"},"borderColorSaturation":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;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"},"strokeColor":{"description":"<p>Stroke color of each rect.</p>\n"},"strokeWidth":{"description":"<p>Stroke width of each rect.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n"}}}}},"breadcrumb":{"properties":{"show":{"description":"<p>Whether to show the breadcrumb.</p>\n"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"height":{"description":"<p>The height of breadcrumb.</p>\n"},"emptyItemWidth":{"description":"<p>When is no content in breadcrumb, this minimal width need to be set up.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>boxplot color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"emphasis":{"properties":{"color":{"description":"<p>boxplot color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"data":{"items":{"properties":{"value":{"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":{"description":"<p><code>id</code> is not mandatory.\nBut if using API, id is used to locate node.</p>\n"},"name":{"description":"<p>Show the description text in rectangle.</p>\n"},"visualDimension":{"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 &quot;dimension&quot;. <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"},"visualMin":{"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>&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n"},"visualMax":{"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>&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n"},"color":{"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":{"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"},"colorSaturation":{"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"},"colorMappingBy":{"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>&#39;value&#39;</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>&#39;index&#39;</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>&#39;id&#39;</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=\"http://echarts.baidu.com/gallery/editor.html?c=treemap-obama&amp;edit=1&amp;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"},"visibleMin":{"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"},"childrenVisibleMin":{"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"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"}}}}},"upperLabel":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of label area.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"ellipsis":{"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n"}}}}},"itemStyle":{"properties":{"color":{"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n"},"colorAlpha":{"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n"},"colorSaturation":{"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n"},"borderWidth":{"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"},"gapWidth":{"description":"<p>Gaps between child nodes.</p>\n"},"borderColor":{"description":"<p>The border color and gap color of a node.</p>\n"},"borderColorSaturation":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;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"},"strokeColor":{"description":"<p>Stroke color of each rect.</p>\n"},"strokeWidth":{"description":"<p>Stroke width of each rect.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n"}}}}}}}},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"center":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>"},"radius":{"description":"<p>Radius of Sunburst chart, the first of which is inner radius, and the second is outer radius.</p>\n<p>Percentage is supported. When set in percentage, it&#39;s relative to the smaller size between height and width of the container. </p>\n"},"data":{"items":{"properties":{"value":{"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":{"description":"<p>Name displayed in each sector.</p>\n"},"link":{"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>&#39;link&#39;</code>.</p>\n<p>See <a href=\"#series-sunburst.data.target\">series-sunburst.data.target</a>.</p>\n"},"target":{"description":"<p>Like <code>target</code> attribute of HTML <code>&lt;a&gt;</code>, which can either be <code>&#39;blank&#39;</code> or <code>&#39;self&#39;</code>. See <a href=\"#series-sunburst.data.link\">series-sunburst.data.link</a>.</p>\n"},"label":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"label":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"highlight":{"properties":{"label":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"downplay":{"properties":{"label":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"children":{"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":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"highlightPolicy":{"description":"<p>When mouse hovers a sector, the sector is emphasized. <strong>If <code>highlightPolicy</code> is set to be <code>&#39;descendant&#39;</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>&#39;ancestor&#39;</code>, then the sector and its ancestors will be highlighted. If it is set to be <code>&#39;self&#39;</code>, then the sector will be highlighted and others downplayed. If it is set to be <code>&#39;none&#39;</code>, then others will not be downplayed.</strong></p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/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>&#39;descendant&#39;</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: &#39;yellow&#39;,\n    borderWidth: 2,\n    emphasis: {\n        color: &#39;red&#39;\n    },\n    highlight: {\n        color: &#39;orange&#39;\n    },\n    downplay: {\n        color: &#39;#ccc&#39;\n    }\n}\n</code></pre>\n<p>If <code>highlightPolicy</code> is set to be <code>&#39;ancestor&#39;</code>, then the result looks like:</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-highlight-ancestor&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n\n"},"nodeClick":{"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>&#39;rootToNode&#39;</code>: use the clicked sector as root.</li>\n<li><code>&#39;link&#39;</code>：if <a href=\"#series-sunburst.data.link\">link</a> is set, the page will redirect to it.</li>\n</ul>\n"},"sort":{"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>&#39;desc&#39;</code> states for descending order, while it can also be set to be <code>&#39;asc&#39;</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"},"renderLabelForZeroData":{"description":"<p>If there is no <code>name</code>, whether need to render it.</p>\n"},"emphasis":{"properties":{"label":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"highlight":{"properties":{"label":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"downplay":{"properties":{"label":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"levels":{"items":{"properties":{"label":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"label":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"highlight":{"properties":{"label":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"downplay":{"properties":{"label":{"properties":{"rotate":{"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>&#39;radial&#39;</code>, standing for radial rotation; or <code>&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>&#39;radial&#39;</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=\"http://echarts.baidu.com/gallery/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"align":{"description":"<p>Align of text, which can be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>. Note that <code>&#39;left&#39;</code> stands for inner side, and <code>&#39;right&#39;</code> stands for outer side.</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n"},"minAngle":{"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"},"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},{"properties":{"type":{"description":""},"id":{"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":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>&#39;cartesian2d&#39;</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"},"xAxisIndex":{"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"},"yAxisIndex":{"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"},"name":{"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":{"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n"},"hoverAnimation":{"description":"<p>Whether to enable the animation when hovering on box.</p>\n"},"layout":{"description":"<p>Layout methods, whose optional values are:</p>\n<ul>\n<li><p><code>&#39;horizontal&#39;</code>: horizontally layout all boxes.</p>\n</li>\n<li><p><code>&#39;vertical&#39;</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>&#39;horizontal&#39;</code>;</li>\n<li>otherwise use <code>&#39;vertical&#39;</code>;</li>\n</ul>\n</li>\n<li>otherwise use <code>&#39;horizontal&#39;</code>.</li>\n</ul>\n"},"boxWidth":{"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>[&#39;40%&#39;, &#39;90%&#39;]</code>. The percentage means the percentage to the maximum possible width.</p>\n"},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"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            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\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>&#39;someName&#39;</code>, which equals to <code>{name: &#39;someName&#39;}</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":{"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: &#39;xxx&#39;,\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>Attributes of encode are different according to the type of coordinate systtems.\nFor <a href=\"#grid\">cartesian2d</a>, <code>x</code> and <code>y</code> can be defined.\nFor <a href=\"#polar\">polar</a>, <code>radius</code> and <code>angle</code> can be defined.\nFor <a href=\"#geo\">geo</a>, <code>lng</code> and <code>lat</code> can be defined.\nAttribute <code>tooltip</code> and <code>itemName</code> (data item name in tooltip) are always able to be defined.</p>\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: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n"},"data":{"items":{"properties":{"name":{"description":"<p>Name of data item.</p>\n"},"value":{"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":{"description":"<p>Graphic style of boxplot, <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n"},"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"properties":{"emphasis":{"description":""},"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>&#39;cartesian2d&#39;</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"},"xAxisIndex":{"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"},"yAxisIndex":{"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"},"name":{"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":{"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n"},"hoverAnimation":{"description":"<p>Whether to enable animitation when hovering on box.</p>\n"},"layout":{"description":"<p>Layout method, whose values may be:</p>\n<ul>\n<li><p><code>&#39;horizontal&#39;</code>: horizontally layout all boxs.</p>\n</li>\n<li><p><code>&#39;vertical&#39;</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>&#39;horizontal&#39;</code>;</li>\n<li>otherwise use <code>&#39;vertical&#39;</code>;</li>\n</ul>\n</li>\n<li>otherwise use <code>&#39;horizontal&#39;</code>.</li>\n</ul>\n"},"barWidth":{"description":"<p>Specify bar width. Absolute value (like <code>10</code>) or percentage (like <code>&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"barMinWidth":{"description":"<p>Specify bar min width. Absolute value (like <code>10</code>) or percentage (like <code>&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"barMaxWidth":{"description":"<p>Specify bar max width. Absolute value (like <code>10</code>) or percentage (like <code>&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"color0":{"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor0":{"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderWidth":{"description":"<p>Border width of candlestick. There is no border when it is <code>0</code>.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"color0":{"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor0":{"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderWidth":{"description":"<p>Border width of candlestick. There is no border when it is <code>0</code>.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"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            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\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>&#39;someName&#39;</code>, which equals to <code>{name: &#39;someName&#39;}</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":{"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: &#39;xxx&#39;,\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>Attributes of encode are different according to the type of coordinate systtems.\nFor <a href=\"#grid\">cartesian2d</a>, <code>x</code> and <code>y</code> can be defined.\nFor <a href=\"#polar\">polar</a>, <code>radius</code> and <code>angle</code> can be defined.\nFor <a href=\"#geo\">geo</a>, <code>lng</code> and <code>lat</code> can be defined.\nAttribute <code>tooltip</code> and <code>itemName</code> (data item name in tooltip) are always able to be defined.</p>\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: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n"},"data":{"items":{"properties":{"name":{"description":"<p>Name of data item.</p>\n"},"value":{"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":{"description":"<p>Graphic style of candlestick, <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n"},"color":{"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"color0":{"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor0":{"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderWidth":{"description":"<p>Border width of candlestick. There is no border when it is <code>0</code>.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"properties":{"emphasis":{"description":""},"color":{"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"color0":{"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor0":{"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderWidth":{"description":"<p>Border width of candlestick. There is no border when it is <code>0</code>.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>&#39;cartesian2d&#39;</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>&#39;geo&#39;</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"},"xAxisIndex":{"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"},"yAxisIndex":{"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"},"geoIndex":{"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"},"calendarIndex":{"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"},"blurSize":{"description":"<p>Blur size of each data point. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;geo&#39; value.</p>\n"},"minOpacity":{"description":"<p>Minimum opacity. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;geo&#39; value.</p>\n"},"maxOpacity":{"description":"<p>Maximum opacity. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of &#39;geo&#39; value.</p>\n"},"data":{"items":{"properties":{"name":{"description":"<p>Name of data item.</p>\n"},"value":{"description":"<p>Value of data item.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>Map charts.</p>\n<p>Due to the increase of fineness of map, ECharts 3 doesn&#39;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>&lt;script&gt;</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\">&lt;script src=&quot;echarts.js&quot;&gt;&lt;/script&gt;\n&lt;script src=&quot;map/js/china.js&quot;&gt;&lt;/script&gt;\n&lt;script&gt;\nvar chart = echarts.init(document.getElmentById(&#39;main&#39;));\nchart.setOption({\n    series: [{\n        type: &#39;map&#39;,\n        map: &#39;china&#39;\n    }]\n});\n&lt;/script&gt;\n</code></pre>\n<p><strong> JSON importing example </strong></p>\n<pre><code class=\"lang-js\">$.get(&#39;map/json/china.json&#39;, function (chinaJson) {\n    echarts.registerMap(&#39;china&#39;, chinaJson);\n    var chart = echarts.init(document.getElmentById(&#39;main&#39;));\n    chart.setOption({\n        series: [{\n            type: &#39;map&#39;,\n            map: &#39;china&#39;\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=\"http://echarts.baidu.com/gallery/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a> for more information.</p>\n"},"roam":{"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>&#39;scale&#39;</code> or <code>&#39;move&#39;</code>. Otherwise, set it to be <code>true</code> to enable both.</p>\n"},"center":{"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":{"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"},"boundingCoords":{"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: &#39;world&#39;,\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"},"zoom":{"description":"<p>Zoom rate of current view-port.</p>\n"},"scaleLimit":{"properties":{"min":{"description":"<p>Minimum scaling</p>\n"},"max":{"description":"<p>Maximum scaling</p>\n"}}},"nameMap":{"description":"<p>Name mapping for customized areas. For example:</p>\n<pre><code class=\"lang-js\">{\n    &#39;China&#39; : &#39;中国&#39;\n}\n</code></pre>\n"},"selectedMode":{"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>&#39;single&#39;</code> for selecting single area, or <code>&#39;multiple&#39;</code> for selecting multiple areas.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"areaColor":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"areaColor":{"description":"<p>Area filling color.</p>\n"},"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"layoutCenter":{"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: [&#39;30%&#39;, &#39;30%&#39;],\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"},"layoutSize":{"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":{"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=\"http://echarts.baidu.com/gallery/view.html?c=geo-map-scatter&reset=1&edit=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n"},"mapValueCalculation":{"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>&#39;sum&#39;</code></li>\n<li><code>&#39;average&#39;</code></li>\n<li><code>&#39;max&#39;</code></li>\n<li><code>&#39;min&#39;</code></li>\n</ul>\n"},"showLegendSymbol":{"description":"<p>Show the symbol in related area (dot of series symbol). Available when <a href=\"#legend\">legend</a> component exists.</p>\n"},"seriesLayoutBy":{"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 &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：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"},"datasetIndex":{"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"},"data":{"items":{"properties":{"name":{"description":"<p>The name of the map area where the data belongs to, such as <code>&#39;China&#39;</code> or <code>&#39;United Kingdom&#39;</code> .</p>\n"},"value":{"description":"<p>The numerical value of this area.</p>\n"},"selected":{"description":"<p>Whether the are selected.</p>\n"},"itemStyle":{"properties":{"areaColor":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"areaColor":{"description":"<p>Color of the area.</p>\n"},"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>&#39;parallel&#39;</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"},"parallelIndex":{"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"},"name":{"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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"inactiveOpacity":{"description":"<p>When perform brush selection, the unselected lines will be set as this transparency rate (which could darken those lines).</p>\n"},"activeOpacity":{"description":"<p>When perform brush selection, the selected lines will be set as this transparency rate (which could highlight those lines).</p>\n"},"realtime":{"description":"<p>Whether to update view in realtime.</p>\n"},"data":{"items":{"properties":{"name":{"description":"<p>The name of a data item.</p>\n"},"value":{"description":"<p>The value of a data item.</p>\n"},"lineStyle":{"description":"<p>Line style.</p>\n"},"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"properties":{"emphasis":{"description":""},"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>&#39;cartesian2d&#39;</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>&#39;geo&#39;</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"},"xAxisIndex":{"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"},"yAxisIndex":{"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"},"geoIndex":{"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"},"polyline":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=lines-bmap-bus\" target=\"_blank\">lines-bus</a>.</p>\n"},"effect":{"properties":{"show":{"description":"<p>Whether to show special effect.</p>\n"},"period":{"description":"<p>The duration of special effect, which unit is second.</p>\n"},"delay":{"description":"<p>Effect animation delay. Can be number or callback function.</p>\n"},"constantSpeed":{"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"},"symbol":{"description":"<p>The symbol of special effect.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\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"},"symbolSize":{"description":"<p>The symbol size of special effect, which could be set as single number such as <code>10</code>. What&#39;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"},"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":{"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"},"loop":{"description":"<p>Whether to loop the special effect animation.</p>\n"}}},"large":{"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(&gt;=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&#39;t be customized</p>\n"},"largeThreshold":{"description":"<p>The threshold enabling the drawing optimization.</p>\n"},"symbol":{"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"},"symbolSize":{"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"},"lineStyle":{"properties":{"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) =&gt; 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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"properties":{"curveness":{"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"}}},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"description":"<p>the position of label, options:</p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"description":"<p>the position of label, options:</p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"data":{"items":{"properties":{"name":{"description":"<p>the name of data.</p>\n"},"coords":{"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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}}}},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"description":"<p>the position of label, options:</p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"description":"<p>the position of label, options:</p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n"},"coordinateSystem":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>null</code> or <code>&#39;none&#39;</code></p>\n<p>  No coordinate.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>&#39;cartesian2d&#39;</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>&#39;polar&#39;</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>&#39;geo&#39;</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>&#39;none&#39;</code></p>\n<p>  Do not use coordinate system.</p>\n</li>\n</ul>\n"},"xAxisIndex":{"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"},"yAxisIndex":{"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"},"polarIndex":{"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"},"geoIndex":{"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"},"calendarIndex":{"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"},"hoverAnimation":{"description":"<p>Whether to enable the highlight animation effect of mousr hover node.</p>\n"},"layout":{"description":"<p>Graph layout.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code>&#39;none&#39;</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>&#39;circular&#39;</code> Adopt circular layout, see the example <a href=\"http://echarts.baidu.com/gallery/editor.html?c=graph-circular-layout\" target=\"_blank\">Les Miserables</a>.</p>\n</li>\n<li><p><code>&#39;force&#39;</code> Adopt force-directed layout, see the example <a href=\"http://echarts.baidu.com/gallery/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"},"circular":{"properties":{"rotateLabel":{"description":"<p>Whether to rotate the label automatically.</p>\n"}}},"force":{"properties":{"initLayout":{"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&#39;t exist, the position will be generated randomly.</p>\n<p>You can also use circular layout <code>&#39;circular&#39;</code>.</p>\n"},"repulsion":{"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"},"gravity":{"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"},"edgeLength":{"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"},"layoutAnimation":{"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 (&gt;100) as the layout process will cause browser to hang.</p>\n"}}},"roam":{"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>&#39;scale&#39;</code> or <code>&#39;move&#39;</code>. Otherwise, set it to be <code>true</code> to enable both.</p>\n"},"nodeScaleRatio":{"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"},"draggable":{"description":"<p>If node is draggable. Only available when using force-directed layout.</p>\n"},"symbol":{"description":"<p>Symbol of node of relation graph.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of node of relation graph symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"focusNodeAdjacency":{"description":"<p>Whether to focus/highlight the hover node and it&#39;s adjacencies.</p>\n"},"edgeSymbol":{"description":"<p>Symbol of two ends of edge line.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">edgeSymbol: [&#39;circle&#39;, &#39;arrow&#39;]\n</code></pre>\n"},"edgeSymbolSize":{"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"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // 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) =&gt; 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"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"edgeLabel":{"properties":{"show":{"description":"<p>If show label on edge.</p>\n"},"position":{"description":"<p>Label position, options：</p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>If show label on edge.</p>\n"},"position":{"description":"<p>Label position, options：</p>\n<ul>\n<li><code>&#39;start&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;end&#39;</code></li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"categories":{"items":{"properties":{"name":{"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":{"description":"<p>Symbol of node of this category.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of node of this category symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"data":{"items":{"properties":{"name":{"description":"<p>Name of data item.</p>\n"},"x":{"description":"<p><code>x</code> value of node position.</p>\n"},"y":{"description":"<p><code>y</code> value of node position.</p>\n"},"fixed":{"description":"<p>If node are fixed when doing force directed layout.</p>\n"},"value":{"description":"<p>Value of data item.</p>\n"},"category":{"description":"<p>Index of category which the data item belongs to.</p>\n"},"symbol":{"description":"<p>Symbol of node of this category.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of node of this category symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"tooltip":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"nodes":{"description":"<p>Alias of <a href=\"#series-graph.data\">data</a></p>\n"},"links":{"items":{"properties":{"source":{"description":"<p><a href=\"#series-graph.data.name\">name of source node</a> on edge</p>\n"},"target":{"description":"<p><a href=\"#series-graph.data.name\">name of target node</a> on edge</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>The curveness of edge, supporting values from 0 to 1. The curveness will be larger as the value becomes lager.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}}}}},"edges":{"description":"<p>Alias of <a href=\"#series-graph.links\">links</a></p>\n"},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n"},"width":{"description":"<p>Width of  component. </p>\n"},"height":{"description":"<p>Height of  component. </p>\n"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n"},"width":{"description":"<p>Width of sankey component. </p>\n"},"height":{"description":"<p>Height of sankey component. </p>\n"},"nodeWidth":{"description":"<p>The node width of rectangle in graph.</p>\n"},"nodeGap":{"description":"<p>The gap between any two regtangles in each column from the graph.</p>\n"},"layoutIterations":{"description":"<p>The iterations of layout, which is used to continuously optimize the positions of nodes in graph, 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"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p>The color of the edge in sankey graphs.</p>\n"},"opacity":{"description":"<p>The opacity of the edge in sankey graph.</p>\n"},"curveness":{"description":"<p>The curveness of the edge in sankey graph.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>The color of the edge in sankey graphs.</p>\n"},"opacity":{"description":"<p>The opacity of the edge in sankey graph.</p>\n"},"curveness":{"description":"<p>The curveness of the edge in sankey graph.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}}}},"data":{"items":{"properties":{"name":{"description":"<p>The name of data item.</p>\n"},"value":{"description":"<p>The value of data item.</p>\n"},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"tooltip":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"nodes":{"description":"<p>Equals to <a href=\"#series-sankey.data\">data</a></p>\n"},"links":{"items":{"properties":{"source":{"description":"<p>The <a href=\"#series-graph.data.name\">name of source node</a> of edge</p>\n"},"target":{"description":"<p>The <a href=\"#series-graph.data.name\">name of target node</a> of edge</p>\n"},"value":{"description":"<p>The value of edge, which decides the width of edge.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>The color of the edge in sankey graphs.</p>\n"},"opacity":{"description":"<p>The opacity of the edge in sankey graph.</p>\n"},"curveness":{"description":"<p>The curveness of the edge in sankey graph.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>The color of the edge in sankey graphs.</p>\n"},"opacity":{"description":"<p>The opacity of the edge in sankey graph.</p>\n"},"curveness":{"description":"<p>The curveness of the edge in sankey graph.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"}}}}}}}},"edges":{"description":"<p>Equals to <a href=\"#series-sankey.links\">links</a></p>\n"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>The specified minimum value.</p>\n"},"max":{"description":"<p>The specified maximum value.</p>\n"},"minSize":{"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&#39;t want the graph of minimum value to be a triangle, you can set up this property larger than 0.</p>\n"},"maxSize":{"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"},"sort":{"description":"<p>Data sorting, which can be whether <code>&#39;ascending&#39;</code>, <code>&#39;descending&#39;</code>, <code>&#39;none&#39;</code>(in data order) or a function, which is the same as <code>Array.prototype.sort(function (a, b) { ... })</code>;</p>\n"},"gap":{"description":"<p>Gap between each trapezoid.</p>\n"},"legendHoverLink":{"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n"},"funnelAlign":{"description":"<p>Horizontal align. Defaults to align center. Can be &#39;left&#39;, &#39;right&#39;, &#39;center&#39;.</p>\n"},"label":{"properties":{"show":{"description":""},"position":{"description":"<p>Label position.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code>&#39;left&#39;</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>&#39;right&#39;</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>&#39;inside&#39;</code></p>\n<p>  Inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code>&#39;inner&#39;</code> equals to <code>&#39;inside&#39;</code>.</p>\n</li>\n<li><code>&#39;center&#39;</code> equals to <code>&#39;inside&#39;</code>.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":""},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // percentage\n    percent: number,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"labelLine":{"properties":{"show":{"description":"<p>Whether to show visual guide line.</p>\n"},"length":{"description":"<p>The length of the first part from visual guide line.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show visual guide line.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // 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) =&gt; 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"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"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 &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：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"},"datasetIndex":{"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"},"data":{"items":{"properties":{"name":{"description":"<p>the name of data item.</p>\n"},"value":{"description":"<p>data value.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":""},"position":{"description":"<p>Label position.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code>&#39;left&#39;</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>&#39;right&#39;</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>&#39;inside&#39;</code></p>\n<p>  Inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code>&#39;inner&#39;</code> equals to <code>&#39;inside&#39;</code>.</p>\n</li>\n<li><code>&#39;center&#39;</code> equals to <code>&#39;inside&#39;</code>.</li>\n</ul>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":""},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"labelLine":{"properties":{"show":{"description":"<p>Whether to show visual guide line.</p>\n"},"length":{"description":"<p>The length of the first part from visual guide line.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show visual guide line.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"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"},"startAngle":{"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"},"endAngle":{"description":"<p>The end angle of gauge chart.</p>\n"},"clockwise":{"description":"<p>Whether the scale in gauge chart increases clockwise.</p>\n"},"min":{"description":"<p>The minimum data value which map to <a href=\"#series-gauge.minAngle\">minAngle</a>.</p>\n"},"max":{"description":"<p>The maximum data value which map to  <a href=\"#series-gauge.maxAngle\">maxAngle</a>.</p>\n"},"splitNumber":{"description":"<p>The number of split segments of gauge chart scale.</p>\n"},"axisLine":{"properties":{"show":{"description":"<p>Whether to show the axis line of gauge chart.</p>\n"},"lineStyle":{"properties":{"color":{"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, &#39;#91c7ae&#39;], [0.8, &#39;#63869e&#39;], [1, &#39;#c23531&#39;]]\n</code></pre>\n"},"width":{"description":"<p>The width of axis line.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the split line.</p>\n"},"length":{"description":"<p>The length of split line, can be a pecentage value relative to radius.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the scale.</p>\n"},"splitNumber":{"description":"<p>The split scale number between split line.</p>\n"},"length":{"description":"<p>The length of tick line, can be a pecentage value relative to radius.</p>\n"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the label.</p>\n"},"formatter":{"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: &#39;{value} kg&#39;\n\n// use function callback. the function parameters are scale values.\nformatter: function (value) {\n    return value + &#39;km/h&#39;;\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"pointer":{"properties":{"show":{"description":"<p>Whether to show the pointer.</p>\n"},"length":{"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"},"width":{"description":"<p>The width of pointer.</p>\n"}}},"itemStyle":{"properties":{"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"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show the title.</p>\n"},"offsetCenter":{"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"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}},"detail":{"properties":{"show":{"description":"<p>Whether to show the details.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, 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":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"offsetCenter":{"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"},"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- overwrite color -->\n"}}},"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"}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"x":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n"},"coordinateSystem":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>&#39;cartesian2d&#39;</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"},"xAxisIndex":{"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"},"yAxisIndex":{"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"},"cursor":{"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"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>&#39;bar&#39;</code> series. This attribute should be set on the last <code>&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code>&#39;bar&#39;</code> series in the coordinate system.</p>\n"},"barMaxWidth":{"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>&#39;bar&#39;</code> series. This attribute should be set on the last <code>&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code>&#39;bar&#39;</code> series in the coordinate system.</p>\n"},"barMinHeight":{"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"},"barGap":{"description":"<p>The gap between bars, can be set as a fixed value like <code>20</code>, or a percent value like <code>&#39;30%&#39;</code>, which means <code>30%</code> of the bar width.</p>\n<p>Set barGap as <code>&#39;-100%&#39;</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>&#39;bar&#39;</code> series. This attribute should be set on the last <code>&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code>&#39;bar&#39;</code> series in the coordinate system.</p>\n<p>For example:</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/barGrid-barGap&reset=1&edit=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n"},"barCategoryGap":{"description":"<p>The bar gap between each category of bar, 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>&#39;bar&#39;</code> series. This attribute should be set on the last <code>&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code>&#39;bar&#39;</code> series in the coordinate system.</p>\n"},"symbol":{"description":"<p>Specify the type of graphic elements.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>Example:</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/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"},"symbolSize":{"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>&#39;120%&#39;</code>, <code>[&#39;55%&#39;, 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>[&#39;30%&#39;, &#39;50%&#39;]</code>, the final size of its graphic elements is:</p>\n<ul>\n<li>width: <code>&lt;width of reference bar&gt; * 30%</code>。</li>\n<li>height:<ul>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used: <code>&lt;height of reference bar&gt; * 50%</code>.</li>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used: <code>&lt;height of reference bar&gt; * 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=\"http://echarts.baidu.com/gallery/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"},"symbolPosition":{"description":"<p>Specify the location of the graphic elements. Optional values:</p>\n<ul>\n<li><code>&#39;start&#39;</code>: The edge of graphic element inscribes with the start of the reference bar.</li>\n<li><code>&#39;end&#39;</code>: The edge of graphic element inscribes with the end of the reference bar.</li>\n<li><code>&#39;center&#39;</code>: The graphic element is at the center of the reference bar.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/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"},"symbolOffset":{"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>&#39;120%&#39;</code>、<code>[&#39;55%&#39;, 23]</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p>For example, <code>[0, &#39;-50%&#39;]</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=\"http://echarts.baidu.com/gallery/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"},"symbolRotate":{"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":{"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>&#39;fixed&#39;</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=\"http://echarts.baidu.com/gallery/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":{"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>&#39;start&#39;</code> and <code>&#39;end&#39;</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/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"},"symbolMargin":{"description":"<p>Specify margin of both sides of a graphic element. (&quot;both sides&quot; 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>&#39;-30%&#39;</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>&quot;!&quot;</code> can be appended on the end of the value, like <code>&quot;30%!&quot;</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>&#39;fixed&#39;</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=\"http://echarts.baidu.com/gallery/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":{"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 &quot;amont value&quot; and &quot;current value&quot; 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=\"http://echarts.baidu.com/gallery/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 &quot;background series&quot; and &quot;current value seires&quot;, which makes their graphic elements are the same size.</li>\n<li>A bigger <a href=\"#series.pictorialBar.z\">z</a> is set on &quot;current value series&quot;, which makes it is over &quot;background series&quot;.</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"},"symbolBoundingData":{"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, &#39;50%&#39;]</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 &quot;amont value&quot;, while another series is used to display &quot;current value&quot;. <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=\"http://echarts.baidu.com/gallery/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=\"http://echarts.baidu.com/gallery/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=\"http://echarts.baidu.com/gallery/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":{"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 = &#39;data:image/jpeg;base64,...&#39;; // dataURI\n// Or\n// textureImg.src = &#39;http://xxx.xxx.xxx/xx.png&#39;; // URL\n...\nitemStyle: {\n    color: {\n        image: textureImg,\n        repeat: &#39;repeat&#39;\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=\"http://echarts.baidu.com/gallery/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"},"hoverAnimation":{"properties":{"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/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"}}},"dimensions":{"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            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\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>&#39;someName&#39;</code>, which equals to <code>{name: &#39;someName&#39;}</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":{"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: &#39;xxx&#39;,\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>Attributes of encode are different according to the type of coordinate systtems.\nFor <a href=\"#grid\">cartesian2d</a>, <code>x</code> and <code>y</code> can be defined.\nFor <a href=\"#polar\">polar</a>, <code>radius</code> and <code>angle</code> can be defined.\nFor <a href=\"#geo\">geo</a>, <code>lng</code> and <code>lat</code> can be defined.\nAttribute <code>tooltip</code> and <code>itemName</code> (data item name in tooltip) are always able to be defined.</p>\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: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n"},"data":{"items":{"properties":{"name":{"description":"<p>The name of data item.</p>\n"},"value":{"description":"<p>The value of a single data item.</p>\n"},"symbol":{"description":"<p>Specify the type of graphic elements.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>Example:</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/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"},"symbolSize":{"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>&#39;120%&#39;</code>, <code>[&#39;55%&#39;, 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>[&#39;30%&#39;, &#39;50%&#39;]</code>, the final size of its graphic elements is:</p>\n<ul>\n<li>width: <code>&lt;width of reference bar&gt; * 30%</code>。</li>\n<li>height:<ul>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used: <code>&lt;height of reference bar&gt; * 50%</code>.</li>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used: <code>&lt;height of reference bar&gt; * 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=\"http://echarts.baidu.com/gallery/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"},"symbolPosition":{"description":"<p>Specify the location of the graphic elements. Optional values:</p>\n<ul>\n<li><code>&#39;start&#39;</code>: The edge of graphic element inscribes with the start of the reference bar.</li>\n<li><code>&#39;end&#39;</code>: The edge of graphic element inscribes with the end of the reference bar.</li>\n<li><code>&#39;center&#39;</code>: The graphic element is at the center of the reference bar.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/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"},"symbolOffset":{"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>&#39;120%&#39;</code>、<code>[&#39;55%&#39;, 23]</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p>For example, <code>[0, &#39;-50%&#39;]</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=\"http://echarts.baidu.com/gallery/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"},"symbolRotate":{"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":{"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>&#39;fixed&#39;</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=\"http://echarts.baidu.com/gallery/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":{"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>&#39;start&#39;</code> and <code>&#39;end&#39;</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"http://echarts.baidu.com/gallery/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"},"symbolMargin":{"description":"<p>Specify margin of both sides of a graphic element. (&quot;both sides&quot; 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>&#39;-30%&#39;</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>&quot;!&quot;</code> can be appended on the end of the value, like <code>&quot;30%!&quot;</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>&#39;fixed&#39;</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=\"http://echarts.baidu.com/gallery/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":{"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 &quot;amont value&quot; and &quot;current value&quot; 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=\"http://echarts.baidu.com/gallery/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 &quot;background series&quot; and &quot;current value seires&quot;, which makes their graphic elements are the same size.</li>\n<li>A bigger <a href=\"#series.pictorialBar.z\">z</a> is set on &quot;current value series&quot;, which makes it is over &quot;background series&quot;.</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"},"symbolBoundingData":{"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, &#39;50%&#39;]</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 &quot;amont value&quot;, while another series is used to display &quot;current value&quot;. <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=\"http://echarts.baidu.com/gallery/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=\"http://echarts.baidu.com/gallery/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=\"http://echarts.baidu.com/gallery/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":{"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 = &#39;data:image/jpeg;base64,...&#39;; // dataURI\n// Or\n// textureImg.src = &#39;http://xxx.xxx.xxx/xx.png&#39;; // URL\n...\nitemStyle: {\n    color: {\n        image: textureImg,\n        repeat: &#39;repeat&#39;\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=\"http://echarts.baidu.com/gallery/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"},"hoverAnimation":{"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"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/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"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"markPoint":{"properties":{"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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) =&gt; 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"},"symbolRotate":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {@score}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"name":{"description":"<p>Mark point name.</p>\n"},"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of  symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n"}}},"markLine":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"symbol":{"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":{"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":{"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> maximum value.</li>\n<li><code>&#39;max&#39;</code> minimum value.</li>\n<li><code>&#39;average&#39;</code> average value.</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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>&#39;category&#39;</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: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\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, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n"},"x":{"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>&#39;circle&#39;</code>, <code>&#39;rect&#39;</code>, <code>&#39;roundRect&#39;</code>, <code>&#39;triangle&#39;</code>, <code>&#39;diamond&#39;</code>, <code>&#39;pin&#39;</code>, <code>&#39;arrow&#39;</code></p>\n<p>It can be set to an image with <code>&#39;image://url&#39;</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>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code>&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"},"symbolSize":{"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":{"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>&#39;arrow&#39;</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n"},"symbolOffset":{"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, &#39;50%&#39;]</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"},"lineStyle":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"},"emphasis":{"properties":{"color":{"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"width":{"description":"<p> line width.</p>\n"},"type":{"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>&#39;solid&#39;</code></li>\n<li><code>&#39;dashed&#39;</code></li>\n<li><code>&#39;dotted&#39;</code></li>\n</ul>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n"}}}}},"label":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"},"emphasis":{"properties":{"show":{"description":"<p>Whether show label or not.</p>\n"},"position":{"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>&#39;start&#39;</code> starting point of the line.</li>\n<li><code>&#39;middle&#39;</code> middle point of the line.</li>\n<li><code>&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n"},"formatter":{"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>&#39;xxx&#39;<code>, for example,</code>{@product}<code>refers the value of</code>&#39;product&#39;` 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: &#39;{b}: {d}&#39;\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) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\n</code></pre>\n"}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"markArea":{"properties":{"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"0":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}},"1":{"properties":{"type":{"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>&#39;min&#39;</code> max value。</li>\n<li><code>&#39;max&#39;</code> min value。</li>\n<li><code>&#39;average&#39;</code> average value。</li>\n</ul>\n"},"valueIndex":{"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":{"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":{"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":{"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"y":{"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>&#39;20%&#39;</code>).</p>\n"},"value":{"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}}}}}},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"properties":{"animationDelay":{"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=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/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"}}},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"left":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, or <code>&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"top":{"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>&#39;20%&#39;</code>; and it can also be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>.</p>\n<p>If the <code>left</code> value is set to be <code>&#39;top&#39;</code>, <code>&#39;middle&#39;</code>, or <code>&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n"},"right":{"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>&#39;20%&#39;</code>.</p>\n"},"bottom":{"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>&#39;20%&#39;</code>.</p>\n"},"width":{"description":"<p>Width of thmemRiver component. </p>\n"},"height":{"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"},"coordinateSystem":{"description":"<p>coordinate. The theme river adopts sinle time axis.</p>\n"},"boundaryGap":{"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"},"singleAxisIndex":{"description":"<p>The index of single time axis, which defaults to be 0 because it contains only one axis.</p>\n"},"label":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}},"emphasis":{"properties":{"show":{"description":"<p>Whether to show label.</p>\n"},"position":{"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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>&#39;top&#39;</code>、<code>&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"rotate":{"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"http://echarts.baidu.com/gallery/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"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":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"},"rich":{"properties":{"<user defined style name>":{"properties":{"color":{"description":"<p> text color.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"align":{"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;left&#39;</code></li>\n<li><code>&#39;center&#39;</code></li>\n<li><code>&#39;right&#39;</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    align: right,\n    rich: {\n        a: {\n            // `align` is not set, then it will be right\n        }\n    }\n}\n</code></pre>\n"},"verticalAlign":{"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;top&#39;</code></li>\n<li><code>&#39;middle&#39;</code></li>\n<li><code>&#39;bottom&#39;</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // `verticalAlign` is not set, then it will be bottom\n        }\n    }\n}\n</code></pre>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // `lineHeight` is not set, then it will be 56\n        }\n    }\n}\n</code></pre>\n"},"backgroundColor":{"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>&#39;#123234&#39;</code>, <code>&#39;red&#39;</code>, <code>rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // It can be URL of a image,\n    // or dataURI,\n    // or HTMLImageElement,\n    // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderColor":{"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"borderWidth":{"description":"<p>Border width of the text fregment.</p>\n"},"borderRadius":{"description":"<p>Border radius of the text fregment.</p>\n"},"padding":{"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n"},"shadowColor":{"description":"<p>Shadow color of the text block.</p>\n"},"shadowBlur":{"description":"<p>Show blur of the text block.</p>\n"},"shadowOffsetX":{"description":"<p>Shadow X offset of the text block.</p>\n"},"shadowOffsetY":{"description":"<p>Shadow Y offset of the text block.</p>\n"},"width":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n<p>If set as <code>&#39;auto&#39;</code>, the color will assigned as visual color, such as series color.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}}}}}}}},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"items":{"properties":{"date":{"description":"<p>the time attribute of time and theme.</p>\n"},"value":{"description":"<p>the value of an event or theme at a time point.</p>\n"},"name":{"description":"<p>the name of an event or theme.</p>\n<pre><code class=\"lang-js\">data: [\n    [&quot;2015/11/09&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/10&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/08&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/09&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/10&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/12&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/13&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/08&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/13&quot;,10,&quot;QG&quot;],\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 &quot;SS&quot; is a main river. After dispose, we would complete these 3 default time points with the format of [&quot;2015/11/08&quot;,0,&quot;DQ&quot;], [&quot;2015/11/12&quot;,0,&quot;DQ&quot;], ［&quot;2015/11/13&quot;,0,&quot;DQ&quot;］, 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":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}},{"properties":{"type":{"description":""},"id":{"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":{"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":{"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n"},"coordinateSystem":{"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>null</code> or <code>&#39;none&#39;</code></p>\n<p>  No coordinate.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>&#39;cartesian2d&#39;</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>&#39;polar&#39;</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>&#39;geo&#39;</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>&#39;none&#39;</code></p>\n<p>  Do not use coordinate system.</p>\n</li>\n</ul>\n"},"xAxisIndex":{"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"},"yAxisIndex":{"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"},"polarIndex":{"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"},"geoIndex":{"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"},"calendarIndex":{"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"},"renderItem":{"properties":{"arguments":{"properties":{"params":{"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.\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    coordSys: // coordSys is variable by different types of coordinate systems:\n    coordSys: {\n        type: &#39;cartesian2d&#39;,\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: &#39;calendar&#39;,\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: &#39;geo&#39;,\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    },\n    coordSys: {\n        type: &#39;polar&#39;,\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: &#39;singleAxis&#39;,\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":{"properties":{"value":{"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":{"description":"<p>Convert data to coordinate.</p>\n<pre><code>@param {Array.&lt;number&gt;} data.\n@return {Array.&lt;number&gt;} Point on canvas, at least includes [x, y].\n        In polar, it also contains:\n        polar: [x, y, radius, angle]\n</code></pre>"},"size":{"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.&lt;number&gt;} dataSize Data range。\n@param {Array.&lt;number&gt;} dataItem The point where the size will be calculated.\n@return {Array.&lt;number&gt;} The size.\n</code></pre>"},"style":{"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: &#39;green&#39;, stroke: &#39;yellow&#39;})</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":{"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: &#39;green&#39;, stroke: &#39;yellow&#39;})</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":{"description":"<p>Get the visual info. It is rarely be used.</p>\n<pre><code>@param {string} visualType &#39;color&#39;, &#39;symbol&#39;, &#39;symbolSize&#39;, ...\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {string|number} The value of visual.\n</code></pre>"},"barLayout":{"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=\"http://echarts.baidu.com/gallery/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.&lt;Object&gt;} [{\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":{"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":{"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":{"description":"<pre><code>@return {number} Width of echarts containter.\n</code></pre>"},"getHeight":{"description":"<pre><code>@return {number} Height of echarts container.\n</code></pre>"},"getZr":{"description":"<pre><code>@return {module:zrender} zrender instance.\n</code></pre>"},"getDevicePixelRatio":{"description":"<pre><code>@return {number} The current devicePixelRatio。\n</code></pre>"}}}}},"return":{"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: &#39;rect&#39;,\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: &#39;group&#39;,\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: &#39;circle&#39;,\n        shape: {\n            cx: cx, cy: cy, r: r\n        },\n        style: api.style()\n    }, {\n        type: &#39;line&#39;,\n        shape: {\n            x1: x1, y1: y1, x2: x2, y2: y2\n        },\n        style: api.style()\n    }]\n}\n</code></pre>\n"}}},"itemStyle":{"properties":{"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>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"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            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\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>&#39;someName&#39;</code>, which equals to <code>{name: &#39;someName&#39;}</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":{"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: &#39;xxx&#39;,\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>Attributes of encode are different according to the type of coordinate systtems.\nFor <a href=\"#grid\">cartesian2d</a>, <code>x</code> and <code>y</code> can be defined.\nFor <a href=\"#polar\">polar</a>, <code>radius</code> and <code>angle</code> can be defined.\nFor <a href=\"#geo\">geo</a>, <code>lng</code> and <code>lat</code> can be defined.\nAttribute <code>tooltip</code> and <code>itemName</code> (data item name in tooltip) are always able to be defined.</p>\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: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n"},"seriesLayoutBy":{"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 &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：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"},"datasetIndex":{"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"},"data":{"items":{"properties":{"name":{"description":"<p>Name of data item.</p>\n"},"value":{"description":"<p>Value of data item.</p>\n"},"itemStyle":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"color":{"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code>&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code>&#39;#ccc&#39;</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If globalCoord is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n    type: &#39;linear&#39;,\n    x: 0,\n    y: 0,\n    x2: 0,\n    y2: 1,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n    type: &#39;radial&#39;,\n    x: 0.5,\n    y: 0.5,\n    r: 0.5,\n    colorStops: [{\n        offset: 0, color: &#39;red&#39; // color at 0% position\n    }, {\n        offset: 1, color: &#39;blue&#39; // color at 100% position\n    }],\n    globalCoord: false // false by default\n}\n// Fill with texture\ncolor: {\n    image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n    repeat: &#39;repeat&#39; // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n"},"borderColor":{"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n"},"borderWidth":{"description":"<p> border width. No border when it is set to be 0.</p>\n"},"borderType":{"description":"<p>Border type, which can be <code>&#39;solid&#39;</code>, <code>&#39;dashed&#39;</code>, or <code>&#39;dotted&#39;</code>. <code>&#39;solid&#39;</code> by default.</p>\n"},"shadowBlur":{"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n"},"shadowOffsetY":{"description":"<p>Offset distance on the vertical direction of shadow.</p>\n"},"opacity":{"description":"<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":{"properties":{"position":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}},"zlevel":{"description":"<p><code>zlevel</code> value of all graghical 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"},"z":{"description":"<p><code>z</code> value of all graghical 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"},"silent":{"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n"},"animation":{"description":"<p>Whether to enable animation.</p>\n"},"animationThreshold":{"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"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"},"animationEasing":{"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"http://echarts.baidu.com/gallery/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n"},"animationDelay":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"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"},"animationEasingUpdate":{"description":"<p>Easing method used for animation.</p>\n"},"animationDelayUpdate":{"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=\"http://echarts.baidu.com/gallery/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"tooltip":{"properties":{"position":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;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&#39;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: [&#39;50%&#39;, &#39;50%&#39;]\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.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; 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: &#39;20%&#39;, 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], &#39;10%&#39;];\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[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code>&#39;inside&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;top&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;left&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;right&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n<li><p><code>&#39;bottom&#39;</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>&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"formatter":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;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>&#39;axis&#39;</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: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\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)) =&gt; 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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n    // the percentage of pie chart\n    percent: number,\n\n}\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>&#39;axis&#39;</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: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data\n    value: number|Array,\n    // Color of data\n    color: string,\n\n}\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(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"backgroundColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"borderColor":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n"},"borderWidth":{"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>&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n"},"padding":{"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>&#39;item&#39;</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"},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"extraCssText":{"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>&#39;item&#39;</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: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n"}}}}}]}},"color":{"properties":{}},"backgroundColor":{"properties":{}},"textStyle":{"properties":{"color":{"description":"<p> text color.</p>\n"},"fontStyle":{"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;italic&#39;</code></li>\n<li><code>&#39;oblique&#39;</code></li>\n</ul>\n"},"fontWeight":{"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>&#39;normal&#39;</code></li>\n<li><code>&#39;bold&#39;</code></li>\n<li><code>&#39;bolder&#39;</code></li>\n<li><code>&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n"},"fontFamily":{"description":"<p> font family</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n"},"fontSize":{"description":"<p> font size</p>\n"},"lineHeight":{"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\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":{"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>&#39;100%&#39;</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"description":"<p>Storke color of the text.</p>\n"},"textBorderWidth":{"description":"<p>Storke line width of the text.</p>\n"},"textShadowColor":{"description":"<p>Shadow color of the text itself.</p>\n"},"textShadowBlur":{"description":"<p>Shadow blue of the text itself.</p>\n"},"textShadowOffsetX":{"description":"<p>Shadow X offset of the text itself.</p>\n"},"textShadowOffsetY":{"description":"<p>Shadow Y offset of the text itself.</p>\n"}}},"animation":{"properties":{}},"animationThreshold":{"properties":{}},"animationDuration":{"properties":{}},"animationEasing":{"properties":{}},"animationDelay":{"properties":{}},"animationDurationUpdate":{"properties":{}},"animationEasingUpdate":{"properties":{}},"animationDelayUpdate":{"properties":{}},"useUTC":{"properties":{}}}}}