| window.__EC_DOC_option_legend = {"type":{"desc":"\n\n<p>Type of legend. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'plain'</code>: Simple legend. (default)</li>\n<li><code class=\"codespan\">'scroll'</code>: Scrollable legend. It helps when too many legend items needed to be shown.</li>\n</ul>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n<p>When <code class=\"codespan\">'scroll'</code> used, these options below can be used for detailed configuration:</p>\n<ul>\n<li><a href=\"#legend.scrollDataIndex\">legend.scrollDataIndex</a></li>\n<li><a href=\"#legend.pageButtonItemGap\">legend.pageButtonItemGap</a></li>\n<li><a href=\"#legend.pageButtonGap\">legend.pageButtonGap</a></li>\n<li><a href=\"#legend.pageButtonPosition\">legend.pageButtonPosition</a></li>\n<li><a href=\"#legend.pageFormatter\">legend.pageFormatter</a></li>\n<li><a href=\"#legend.pageIcons\">legend.pageIcons</a></li>\n<li><a href=\"#legend.pageIconColor\">legend.pageIconColor</a></li>\n<li><a href=\"#legend.pageIconInactiveColor\">legend.pageIconInactiveColor</a></li>\n<li><a href=\"#legend.pageIconSize\">legend.pageIconSize</a></li>\n<li><a href=\"#legend.pageTextStyle\">legend.pageTextStyle</a></li>\n<li><a href=\"#legend.animation\">legend.animation</a></li>\n<li><a href=\"#legend.animationDurationUpdate\">legend.animationDurationUpdate</a></li>\n</ul>\n","uiControl":{"type":"enum","options":"plain,scroll"}},"id":{"desc":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"desc":"\n\n\n\n\n\n\n\n","uiControl":{"type":"boolean","default":"true"}},"zlevel":{"desc":"<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">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 separate <code class=\"codespan\">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 class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n"},"z":{"desc":"<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n"},"left":{"desc":"<p>Distance between legend component and the left side of the container.</p>\n<p><code class=\"codespan\">left</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>.</p>\n<p>If the <code class=\"codespan\">left</code> value is set to be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>, then the component will be aligned automatically based on position.</p>\n","uiControl":{"type":"percent","default":"0%"}},"top":{"desc":"<p>Distance between legend component and the top side of the container.</p>\n<p><code class=\"codespan\">top</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>; and it can also be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>.</p>\n<p>If the <code class=\"codespan\">top</code> value is set to be <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, or <code class=\"codespan\">'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","uiControl":{"type":"percent","default":"0%"}},"right":{"desc":"<p>Distance between legend component and the right side of the container.</p>\n<p><code class=\"codespan\">right</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","uiControl":{"type":"percent","default":"0%"}},"bottom":{"desc":"<p>Distance between legend component and the bottom side of the container.</p>\n<p><code class=\"codespan\">bottom</code> value can be instant pixel value like <code class=\"codespan\">20</code>; it can also be a percentage value relative to container width like <code class=\"codespan\">'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","uiControl":{"type":"percent","default":"0%"}},"width":{"desc":"<p>Width of legend component. Adaptive by default.</p>\n","uiControl":{"type":"percent","default":"50%"}},"height":{"desc":"<p>Height of legend component. Adaptive by default.</p>\n","uiControl":{"type":"percent","default":"50%"}},"orient":{"desc":"\n\n<p>The layout orientation of legend.</p>\n<p>Options:</p>\n<ul>\n<li>'horizontal'</li>\n<li>'vertical'</li>\n</ul>\n","uiControl":{"type":"enum","options":"vertical,horizontal","default":"horizontal"}},"align":{"desc":"\n\n<p>Legend marker and text aligning. By default, it automatically calculates from component location and orientation. When <a href=\"#legend.left\">left</a> value of this component is 'right', and the vertical layout (<a href=\"#legend.orient\">orient</a> is 'vertical'), it would be aligned to 'right'.</p>\n<p>Option:</p>\n<ul>\n<li>'auto'</li>\n<li>'left'</li>\n<li>'right'</li>\n</ul>\n","uiControl":{"type":"enum","options":"auto,left,right","default":"auto"}},"padding":{"desc":"\n\n\n\n\n\n<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-ts\">// 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","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}},"itemGap":{"desc":"\n\n<p>The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.</p>\n","uiControl":{"type":"number","default":"10","min":"0","step":"0.5"}},"itemWidth":{"desc":"\n\n<p>Image width of legend symbol.</p>\n","uiControl":{"type":"number","default":"25","min":"0","step":"0.5"}},"itemHeight":{"desc":"\n\n<p>Image height of legend symbol.</p>\n","uiControl":{"type":"number","default":"14","min":"0","step":"0.5"}},"itemStyle":{"desc":"<p>Legend item style. If its children have values as <code class=\"codespan\">'inherit'</code>, the values are inherited from corresponding series options.</p>\n"},"itemStyle.color":{"desc":"\n\n<p> color. </p>\n<blockquote>\n<p>Supports setting as solid color using <code class=\"codespan\">rgb(255,255,255)</code>, <code class=\"codespan\">rgba(255,255,255,1)</code>, <code class=\"codespan\">#fff</code>, etc. Also supports setting as gradient color and pattern fill, see <a href=\"#color\">option.color</a> for details</p>\n</blockquote>\n","uiControl":{"type":"color"}},"itemStyle.borderColor":{"desc":"\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color"}},"itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p>When its value is <code class=\"codespan\">"auto"</code>, if there is <code class=\"codespan\">borderWidth</code> in series, then it is set to be 2, otherwise, it is set to be 0. If its value is <code class=\"codespan\">"inherit"</code>, then the <code class=\"codespan\">borderWidth</code> of the series are always used</p>\n","uiControl":{"type":"number","value":"auto","min":"0","step":"0.5"}},"itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">borderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"itemStyle.borderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">borderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"itemStyle.borderCap":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To specify how to draw the end points of the line.\nPossible values are:</p>\n<ul>\n<li><code class=\"codespan\">'butt'</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">'round'</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">'square'</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">'butt'</code>. Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap\" target=\"_blank\">lineCap</a> for more details.</p>\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"}},"itemStyle.borderJoin":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To determine the shape used to join two line segments where they meet.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'bevel'</code>: Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.</li>\n<li><code class=\"codespan\">'round'</code>: Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.</li>\n<li><code class=\"codespan\">'miter'</code>: Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \n<code class=\"codespan\">borderMiterLimit</code>\nproperty.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">'bevel'</code>. Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin\" target=\"_blank\">lineJoin</a> for more details.</p>\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"}},"itemStyle.borderMiterLimit":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the miter limit ratio. Only works when \n<code class=\"codespan\">borderJoin</code>\n is set as <code class=\"codespan\">miter</code>.</p>\n<p>Default value is <code class=\"codespan\">10</code>. Negative、<code class=\"codespan\">0</code>、<code class=\"codespan\">Infinity</code> and <code class=\"codespan\">NaN</code> values are ignored.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit\" target=\"_blank\">miterLimit</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"}},"itemStyle.shadowBlur":{"desc":"\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"0","min":"0","step":"0.5"}},"itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":"null"}},"itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"itemStyle.opacity":{"desc":"\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","uiControl":{"type":"number","default":"inherit","min":"0","max":"1","step":"0.01"}},"itemStyle.decal":{"desc":"<p>The style of the decal pattern. It works only if <a href=\"#aria.enabled\">aria.enabled</a> and <a href=\"#aria.decal.show\">aria.decal.show</a> are both set to be <code class=\"codespan\">true</code>.</p>\n<p>If it is set to be <code class=\"codespan\">'none'</code>, no decal will be used.</p>\n"},"itemStyle.decal.symbol":{"desc":"<p>The symbol type of the decal. If it is in the type of <code class=\"codespan\">string[]</code>, it means the symbols are used one by one.</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://example.website/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector 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 the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"itemStyle.decal.symbolSize":{"desc":"<p>Range of values: <code class=\"codespan\">0</code> to <code class=\"codespan\">1</code>, representing the size of symbol relative to decal.</p>\n"},"itemStyle.decal.symbolKeepAspect":{"desc":"<p>Whether or not to keep the aspect ratio of the pattern.</p>\n"},"itemStyle.decal.color":{"desc":"<p>For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.</p>\n"},"itemStyle.decal.backgroundColor":{"desc":"<p>The background color of the decal will be over the color of the series itself, under the decal pattern.</p>\n"},"itemStyle.decal.dashArrayX":{"desc":"<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class=\"codespan\">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class=\"codespan\">dashArrayX</code> controls the horizontal pattern pattern. When its value is of type <code class=\"codespan\">number</code> or <code class=\"codespan\">number[]</code>, it is similar to <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is of type <code class=\"codespan\">number</code>, it means that the pattern and the blank space are of this value respectively. For example, <code class=\"codespan\">5</code> means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class=\"codespan\">number[]</code> type, it means that the pattern and empty space are loops of an array of values. For example: <code class=\"codespan\">[5, 10, 2, 6]</code> means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...</p>\n</li>\n<li><p>If of type <code class=\"codespan\">(number | number[])[]</code>, it means that each row is a loop with an array of values for the pattern and blank space. For example: <code class=\"codespan\">[10, [2, 5]]</code> means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1\" width=\"700\" height=\"300\"></iframe>\n\n"},"itemStyle.decal.dashArrayY":{"desc":"<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class=\"codespan\">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class=\"codespan\">dashArrayY</code> controls the horizontal pattern pattern. Similar to <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is a <code class=\"codespan\">number</code> type, it means the pattern and the blank are each of this value. For example, <code class=\"codespan\">5</code> means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class=\"codespan\">number[]</code> type, it means that the pattern and empty space are loops of sequential array values. For example: <code class=\"codespan\">[5, 10, 2, 6]</code> means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1\" width=\"700\" height=\"300\"></iframe>\n\n"},"itemStyle.decal.rotation":{"desc":"<p>The overall rotation angle (in radians) of the pattern, in the range from `-Math.</p>\n"},"itemStyle.decal.maxTileWidth":{"desc":"<p>The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.</p>\n"},"itemStyle.decal.maxTileHeight":{"desc":"<p>The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.</p>\n"},"lineStyle":{"desc":"<p>Legend line style. If its children have values as <code class=\"codespan\">'inherit'</code>, the values are inherited from corresponding series options.</p>\n"},"lineStyle.color":{"desc":"\n\n<p>Line color. </p>\n<blockquote>\n<p>Supports setting as solid color using <code class=\"codespan\">rgb(255,255,255)</code>, <code class=\"codespan\">rgba(255,255,255,1)</code>, <code class=\"codespan\">#fff</code>, etc. Also supports setting as gradient color and pattern fill, see <a href=\"#color\">option.color</a> for details</p>\n</blockquote>\n","uiControl":{"type":"color"}},"lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"auto","min":"0","step":"0.5"}},"lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">dashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"lineStyle.dashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">type</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"lineStyle.cap":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To specify how to draw the end points of the line.\nPossible values are:</p>\n<ul>\n<li><code class=\"codespan\">'butt'</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">'round'</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">'square'</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">'butt'</code>. Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap\" target=\"_blank\">lineCap</a> for more details.</p>\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"}},"lineStyle.join":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To determine the shape used to join two line segments where they meet.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'bevel'</code>: Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.</li>\n<li><code class=\"codespan\">'round'</code>: Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.</li>\n<li><code class=\"codespan\">'miter'</code>: Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \n<code class=\"codespan\">miterLimit</code>\nproperty.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">'bevel'</code>. Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin\" target=\"_blank\">lineJoin</a> for more details.</p>\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"}},"lineStyle.miterLimit":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the miter limit ratio. Only works when \n<code class=\"codespan\">join</code>\n is set as <code class=\"codespan\">miter</code>.</p>\n<p>Default value is <code class=\"codespan\">10</code>. Negative、<code class=\"codespan\">0</code>、<code class=\"codespan\">Infinity</code> and <code class=\"codespan\">NaN</code> values are ignored.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit\" target=\"_blank\">miterLimit</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"}},"lineStyle.shadowBlur":{"desc":"\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"inherit","min":"0","step":"0.5"}},"lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"lineStyle.opacity":{"desc":"\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","uiControl":{"type":"number","default":"inherit","min":"0","max":"1","step":"0.01"}},"symbolRotate":{"desc":"<p>Rotation of the symbol, which can be <code class=\"codespan\">number | 'inherit'</code>. If it's <code class=\"codespan\">'inherit'</code>, <code class=\"codespan\">symbolRotate</code> of the series will be used.</p>\n"},"formatter":{"desc":"<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-ts\">// using string template, the template variable is legend name {name}\nformatter: 'Legend {name}'\n// using callback function\nformatter: function (name) {\n return 'Legend ' + name;\n}\n</code></pre>\n"},"selectedMode":{"desc":"\n\n<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 class=\"codespan\">false</code> to disable it.</p>\n<p>Besides, it can be set to <code class=\"codespan\">'single'</code> or <code class=\"codespan\">'multiple'</code>, for single selection and multiple selection.</p>\n","uiControl":{"type":"boolean","options":"true,false,single,multiple"}},"inactiveColor":{"desc":"\n\n<p>Legend color when not selected.</p>\n","uiControl":{"type":"color","default":"#ccc"}},"inactiveBorderColor":{"desc":"\n\n<p>Legend border color when not selected.</p>\n","uiControl":{"type":"color","default":"#ccc"}},"inactiveBorderWidth":{"desc":"\n\n<p>Legend border width when not selected. If it is <code class=\"codespan\">'auto'</code>, the border width is set to be 2 if there is border width in the series, 0 elsewise. If it is <code class=\"codespan\">'inherit'</code>, it always takes the border width of the series.</p>\n","uiControl":{"type":"color","default":"#ccc"}},"selected":{"desc":"<p>State table of selected legend.</p>\n<p>example:</p>\n<pre><code>selected: {\n // selected'series 1'\n 'series 1': true,\n // unselected'series 2'\n 'series 2': false\n}\n</code></pre>"},"textStyle":{"desc":"<p>Legend text style.</p>\n"},"textStyle.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"#333"}},"textStyle.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"textStyle.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"textStyle.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"textStyle.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"textStyle.lineHeight":{"desc":"\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"textStyle.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","uiControl":{"type":"color","default":"#fff"}},"textStyle.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"textStyle.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textStyle.borderType":{"desc":"\n\n\n<p>the text fragment border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">borderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"textStyle.borderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">borderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"textStyle.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"textStyle.padding":{"desc":"\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}},"textStyle.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"textStyle.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textStyle.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"textStyle.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"textStyle.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"textStyle.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"textStyle.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"textStyle.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textStyle.textBorderType":{"desc":"\n\n\n<p>Stroke line type of the text.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">textBorderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"textStyle.textBorderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">textBorderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"textStyle.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"textStyle.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textStyle.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"textStyle.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"textStyle.overflow":{"desc":"\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"textStyle.ellipsis":{"desc":"<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n"},"textStyle.rich":{"desc":"<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-ts\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"textStyle.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"textStyle.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"textStyle.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"textStyle.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"textStyle.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"textStyle.rich.<style_name>.align":{"desc":"\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"enum","options":"left,center,right"}},"textStyle.rich.<style_name>.verticalAlign":{"desc":"\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"textStyle.rich.<style_name>.lineHeight":{"desc":"\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"textStyle.rich.<style_name>.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","uiControl":{"type":"color","default":"#fff"}},"textStyle.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"textStyle.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textStyle.rich.<style_name>.borderType":{"desc":"\n\n\n<p>the text fragment border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">borderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"textStyle.rich.<style_name>.borderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">borderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"textStyle.rich.<style_name>.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"textStyle.rich.<style_name>.padding":{"desc":"\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}},"textStyle.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"textStyle.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textStyle.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"textStyle.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"textStyle.rich.<style_name>.width":{"desc":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textStyle.rich.<style_name>.height":{"desc":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"textStyle.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"textStyle.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textStyle.rich.<style_name>.textBorderType":{"desc":"\n\n\n<p>Stroke line type of the text.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">textBorderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"textStyle.rich.<style_name>.textBorderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">textBorderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"textStyle.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"textStyle.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"textStyle.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"textStyle.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"tooltip":{"desc":"<p>Tooltip configuration for legend tooltip, which is similar to <a href=\"#tooltip\">tooltip</a>.</p>\n"},"icon":{"desc":"\n\n<p>Icon of the legend items.</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://example.website/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector 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 the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>","uiControl":{"type":"icon"}},"data":{"desc":"<p>Data array of legend. An array item is usually a <code class=\"codespan\">name</code> representing string. (If it is a <a href=\"#series-pie\">pie chart</a>, it could also be the <code class=\"codespan\">name</code> of a single data in the pie chart) of a series. Legend component would automatically calculate the color and icon according to series. Special string <code class=\"codespan\">''</code> (null string) or <code class=\"codespan\">'\\n'</code> (new line string) can be used for a new line.</p>\n<p>If <code class=\"codespan\">data</code> is not specified, it will be auto collected from series. For most of series, it will be collected from <a href=\"#series.name\">series.name</a> or the dimension name specified by <code class=\"codespan\">seriesName</code> of <a href=\"#series.encode\">series.encode</a>. For some types of series like <a href=\"#series-pie\">pie</a> and <a href=\"#series-funnel\">funnel</a>, it will be collected from the name field of <code class=\"codespan\">series.data</code>.</p>\n<p>If you need to set the style for a single item, you may also set the configuration of it. In this case, <code class=\"codespan\">name</code> attribute is used to represent name of <code class=\"codespan\">series</code>.</p>\n<p>Example:</p>\n<pre><code>data: [{\n name: 'series 1',\n // compulsorily set icon as a circle\n icon: 'circle',\n // set up the text in red\n textStyle: {\n color: 'red'\n }\n}]\n</code></pre>"},"data.name":{"desc":"<p>Name of legend, which should be the <code class=\"codespan\">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"},"data.icon":{"desc":"<p>Icon of the legend.</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://example.website/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector 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 the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"data.itemStyle":{"desc":"<p>Legend Item item style. If its children have values as <code class=\"codespan\">'inherit'</code>, the values are inherited from corresponding series options.</p>\n"},"data.itemStyle.color":{"desc":"\n\n<p> color. </p>\n<blockquote>\n<p>Supports setting as solid color using <code class=\"codespan\">rgb(255,255,255)</code>, <code class=\"codespan\">rgba(255,255,255,1)</code>, <code class=\"codespan\">#fff</code>, etc. Also supports setting as gradient color and pattern fill, see <a href=\"#color\">option.color</a> for details</p>\n</blockquote>\n","uiControl":{"type":"color"}},"data.itemStyle.borderColor":{"desc":"\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color"}},"data.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p>When its value is <code class=\"codespan\">"auto"</code>, if there is <code class=\"codespan\">borderWidth</code> in series, then it is set to be 2, otherwise, it is set to be 0. If its value is <code class=\"codespan\">"inherit"</code>, then the <code class=\"codespan\">borderWidth</code> of the series are always used</p>\n","uiControl":{"type":"number","value":"auto","min":"0","step":"0.5"}},"data.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">borderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"data.itemStyle.borderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">borderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"data.itemStyle.borderCap":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To specify how to draw the end points of the line.\nPossible values are:</p>\n<ul>\n<li><code class=\"codespan\">'butt'</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">'round'</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">'square'</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">'butt'</code>. Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap\" target=\"_blank\">lineCap</a> for more details.</p>\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"}},"data.itemStyle.borderJoin":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To determine the shape used to join two line segments where they meet.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'bevel'</code>: Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.</li>\n<li><code class=\"codespan\">'round'</code>: Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.</li>\n<li><code class=\"codespan\">'miter'</code>: Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \n<code class=\"codespan\">borderMiterLimit</code>\nproperty.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">'bevel'</code>. Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin\" target=\"_blank\">lineJoin</a> for more details.</p>\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"}},"data.itemStyle.borderMiterLimit":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the miter limit ratio. Only works when \n<code class=\"codespan\">borderJoin</code>\n is set as <code class=\"codespan\">miter</code>.</p>\n<p>Default value is <code class=\"codespan\">10</code>. Negative、<code class=\"codespan\">0</code>、<code class=\"codespan\">Infinity</code> and <code class=\"codespan\">NaN</code> values are ignored.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit\" target=\"_blank\">miterLimit</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"}},"data.itemStyle.shadowBlur":{"desc":"\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"0","min":"0","step":"0.5"}},"data.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":"null"}},"data.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"data.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"data.itemStyle.opacity":{"desc":"\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","uiControl":{"type":"number","default":"inherit","min":"0","max":"1","step":"0.01"}},"data.itemStyle.decal":{"desc":"<p>The style of the decal pattern. It works only if <a href=\"#aria.enabled\">aria.enabled</a> and <a href=\"#aria.decal.show\">aria.decal.show</a> are both set to be <code class=\"codespan\">true</code>.</p>\n<p>If it is set to be <code class=\"codespan\">'none'</code>, no decal will be used.</p>\n"},"data.itemStyle.decal.symbol":{"desc":"<p>The symbol type of the decal. If it is in the type of <code class=\"codespan\">string[]</code>, it means the symbols are used one by one.</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://example.website/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector 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 the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"data.itemStyle.decal.symbolSize":{"desc":"<p>Range of values: <code class=\"codespan\">0</code> to <code class=\"codespan\">1</code>, representing the size of symbol relative to decal.</p>\n"},"data.itemStyle.decal.symbolKeepAspect":{"desc":"<p>Whether or not to keep the aspect ratio of the pattern.</p>\n"},"data.itemStyle.decal.color":{"desc":"<p>For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.</p>\n"},"data.itemStyle.decal.backgroundColor":{"desc":"<p>The background color of the decal will be over the color of the series itself, under the decal pattern.</p>\n"},"data.itemStyle.decal.dashArrayX":{"desc":"<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class=\"codespan\">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class=\"codespan\">dashArrayX</code> controls the horizontal pattern pattern. When its value is of type <code class=\"codespan\">number</code> or <code class=\"codespan\">number[]</code>, it is similar to <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is of type <code class=\"codespan\">number</code>, it means that the pattern and the blank space are of this value respectively. For example, <code class=\"codespan\">5</code> means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class=\"codespan\">number[]</code> type, it means that the pattern and empty space are loops of an array of values. For example: <code class=\"codespan\">[5, 10, 2, 6]</code> means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...</p>\n</li>\n<li><p>If of type <code class=\"codespan\">(number | number[])[]</code>, it means that each row is a loop with an array of values for the pattern and blank space. For example: <code class=\"codespan\">[10, [2, 5]]</code> means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1\" width=\"700\" height=\"300\"></iframe>\n\n"},"data.itemStyle.decal.dashArrayY":{"desc":"<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class=\"codespan\">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class=\"codespan\">dashArrayY</code> controls the horizontal pattern pattern. Similar to <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is a <code class=\"codespan\">number</code> type, it means the pattern and the blank are each of this value. For example, <code class=\"codespan\">5</code> means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class=\"codespan\">number[]</code> type, it means that the pattern and empty space are loops of sequential array values. For example: <code class=\"codespan\">[5, 10, 2, 6]</code> means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1\" width=\"700\" height=\"300\"></iframe>\n\n"},"data.itemStyle.decal.rotation":{"desc":"<p>The overall rotation angle (in radians) of the pattern, in the range from `-Math.</p>\n"},"data.itemStyle.decal.maxTileWidth":{"desc":"<p>The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.</p>\n"},"data.itemStyle.decal.maxTileHeight":{"desc":"<p>The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.</p>\n"},"data.lineStyle":{"desc":"<p>Legend Item line style. If its children have values as <code class=\"codespan\">'inherit'</code>, the values are inherited from corresponding series options.</p>\n"},"data.lineStyle.color":{"desc":"\n\n<p>Line color. </p>\n<blockquote>\n<p>Supports setting as solid color using <code class=\"codespan\">rgb(255,255,255)</code>, <code class=\"codespan\">rgba(255,255,255,1)</code>, <code class=\"codespan\">#fff</code>, etc. Also supports setting as gradient color and pattern fill, see <a href=\"#color\">option.color</a> for details</p>\n</blockquote>\n","uiControl":{"type":"color"}},"data.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"auto","min":"0","step":"0.5"}},"data.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">dashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\ntype: [5, 10],\n\ndashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"data.lineStyle.dashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">type</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"data.lineStyle.cap":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To specify how to draw the end points of the line.\nPossible values are:</p>\n<ul>\n<li><code class=\"codespan\">'butt'</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">'round'</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">'square'</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">'butt'</code>. Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap\" target=\"_blank\">lineCap</a> for more details.</p>\n","uiControl":{"type":"enum","default":"butt","options":"butt,round,square"}},"data.lineStyle.join":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To determine the shape used to join two line segments where they meet.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'bevel'</code>: Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.</li>\n<li><code class=\"codespan\">'round'</code>: Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.</li>\n<li><code class=\"codespan\">'miter'</code>: Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the \n<code class=\"codespan\">miterLimit</code>\nproperty.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">'bevel'</code>. Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin\" target=\"_blank\">lineJoin</a> for more details.</p>\n","uiControl":{"type":"enum","default":"bevel","options":"bevel,round,miter"}},"data.lineStyle.miterLimit":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the miter limit ratio. Only works when \n<code class=\"codespan\">join</code>\n is set as <code class=\"codespan\">miter</code>.</p>\n<p>Default value is <code class=\"codespan\">10</code>. Negative、<code class=\"codespan\">0</code>、<code class=\"codespan\">Infinity</code> and <code class=\"codespan\">NaN</code> values are ignored.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit\" target=\"_blank\">miterLimit</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"10"}},"data.lineStyle.shadowBlur":{"desc":"\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"inherit","min":"0","step":"0.5"}},"data.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"data.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"data.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"data.lineStyle.opacity":{"desc":"\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","uiControl":{"type":"number","default":"inherit","min":"0","max":"1","step":"0.01"}},"data.symbolRotate":{"desc":"<p>Rotation of the symbol, which can be <code class=\"codespan\">number | 'inherit'</code>. If it's <code class=\"codespan\">'inherit'</code>, <code class=\"codespan\">symbolRotate</code> of the series will be used.</p>\n"},"data.textStyle":{"desc":"<p>Text style of legend.</p>\n"},"backgroundColor":{"desc":"\n\n<p>Background color of legend, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>.</p>\n</blockquote>\n","uiControl":{"type":"color"}},"borderColor":{"desc":"\n\n<p>Border color of legend. Support the same color format as backgroundColor.</p>\n","uiControl":{"type":"color","default":"#ccc"}},"borderWidth":{"desc":"\n\n<p>Border width of legend.</p>\n","uiControl":{"type":"number","default":"1","min":"0","step":"0.5"}},"borderRadius":{"desc":"\n\n<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>","uiControl":{"type":"vector","min":"0","dims":"LT,RT,RB,LB"}},"shadowBlur":{"desc":"\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> is configured and <code class=\"codespan\">backgroundColor</code> is defined other than <code class=\"codespan\">transparent</code>.</p>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","uiControl":{"type":"color","default":""}},"shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class=\"codespan\">show: true</code> configured.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"scrollDataIndex":{"desc":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p><code class=\"codespan\">dataIndex</code> of the left top most displayed item.</p>\n<p>Although the scrolling of legend items can be controlled by calling <code class=\"codespan\">setOption</code> and specifying this property, we suggest that do not control legend in this way unless necessary (<code class=\"codespan\">setOption</code> might be time-consuming), but just use action <a href=\"api.html#action.legend.legendScroll\" target=\"_blank\">legendScroll</a> to do that.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageButtonItemGap":{"desc":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The gap between page buttons and page info text.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageButtonGap":{"desc":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The gap between page buttons and legend items.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageButtonPosition":{"desc":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The position of page buttons and page info. Optional values:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code>: on the left or top.</li>\n<li><code class=\"codespan\">'end'</code>: on the right or bottom.</li>\n</ul>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageFormatter":{"desc":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>Page info formatter. It is <code class=\"codespan\">'{current}/{total}'</code> by default, where <code class=\"codespan\">{current}</code> is current page number (start from 1), and <code class=\"codespan\">{total}</code> is the total page number.</p>\n<p>If <code class=\"codespan\">pageFormatter</code> is a function, it should return a string. The parameters is:</p>\n<pre><code class=\"lang-ts\">{\n current: number\n total: number\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageIcons":{"desc":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The icons of page buttons.</p>\n"},"pageIcons.horizontal":{"desc":"<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code class=\"codespan\">'horizontal'</code>.</p>\n<p>It should be an array, <code class=\"codespan\">[previous page button, next page button]</code>, <code class=\"codespan\">['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://example.website/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector 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 the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageIcons.vertical":{"desc":"<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code class=\"codespan\">'vertical'</code>.</p>\n<p>It should be an array, <code class=\"codespan\">[previous page button, next page button]</code>, <code class=\"codespan\">['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://example.website/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector 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 the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"pageIconColor":{"desc":"\n\n<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The color of page buttons.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","uiControl":{"type":"color","default":"#2f4554"}},"pageIconInactiveColor":{"desc":"\n\n<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The color of page buttons when they are inactive.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","uiControl":{"type":"color","default":"#aaa"}},"pageIconSize":{"desc":"\n\n<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The size of page buttons. It can be a number, or an array, like <code class=\"codespan\">[10, 3]</code>, represents <code class=\"codespan\">[width, height]</code>.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","uiControl":{"type":"vector","default":"15,15","dims":"w,h"}},"pageTextStyle":{"desc":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code class=\"codespan\">'scroll'</code>.</p>\n<p>The text style of page info.</p>\n"},"pageTextStyle.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"#333"}},"pageTextStyle.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"pageTextStyle.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"pageTextStyle.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"pageTextStyle.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"pageTextStyle.lineHeight":{"desc":"\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"pageTextStyle.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"pageTextStyle.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"pageTextStyle.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"pageTextStyle.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"pageTextStyle.textBorderType":{"desc":"\n\n\n<p>Stroke line type of the text.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">textBorderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"pageTextStyle.textBorderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">textBorderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"pageTextStyle.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"pageTextStyle.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"pageTextStyle.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"pageTextStyle.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"pageTextStyle.overflow":{"desc":"\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"pageTextStyle.ellipsis":{"desc":"<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n"},"animation":{"desc":"\n\n<p>Whether to use animation when page scrolls.</p>\n","uiControl":{"type":"boolean","default":"true"}},"animationDurationUpdate":{"desc":"\n\n<p>Duration of the page scroll animation.</p>\n","uiControl":{"type":"number","min":"0","default":"800","step":"20"}},"emphasis.selectorLabel":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n"},"emphasis.selectorLabel.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"true"}},"emphasis.selectorLabel.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"emphasis.selectorLabel.rotate":{"desc":"\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"emphasis.selectorLabel.offset":{"desc":"\n\n<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"emphasis.selectorLabel.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"emphasis.selectorLabel.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"emphasis.selectorLabel.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"emphasis.selectorLabel.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"emphasis.selectorLabel.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"emphasis.selectorLabel.align":{"desc":"\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"enum","options":"left,center,right"}},"emphasis.selectorLabel.verticalAlign":{"desc":"\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"emphasis.selectorLabel.lineHeight":{"desc":"\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"emphasis.selectorLabel.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"emphasis.selectorLabel.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"emphasis.selectorLabel.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.selectorLabel.borderType":{"desc":"\n\n\n<p>the text fragment border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">borderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"emphasis.selectorLabel.borderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">borderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"emphasis.selectorLabel.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"emphasis.selectorLabel.padding":{"desc":"\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}},"emphasis.selectorLabel.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"emphasis.selectorLabel.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.selectorLabel.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.selectorLabel.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.selectorLabel.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"emphasis.selectorLabel.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"emphasis.selectorLabel.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"emphasis.selectorLabel.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.selectorLabel.textBorderType":{"desc":"\n\n\n<p>Stroke line type of the text.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">textBorderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"emphasis.selectorLabel.textBorderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">textBorderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"emphasis.selectorLabel.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"emphasis.selectorLabel.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.selectorLabel.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.selectorLabel.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.selectorLabel.overflow":{"desc":"\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"emphasis.selectorLabel.ellipsis":{"desc":"<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n"},"emphasis.selectorLabel.rich":{"desc":"<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-ts\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"emphasis.selectorLabel.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"emphasis.selectorLabel.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"emphasis.selectorLabel.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"emphasis.selectorLabel.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"emphasis.selectorLabel.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"emphasis.selectorLabel.rich.<style_name>.align":{"desc":"\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"enum","options":"left,center,right"}},"emphasis.selectorLabel.rich.<style_name>.verticalAlign":{"desc":"\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"emphasis.selectorLabel.rich.<style_name>.lineHeight":{"desc":"\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"emphasis.selectorLabel.rich.<style_name>.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"emphasis.selectorLabel.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"emphasis.selectorLabel.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.selectorLabel.rich.<style_name>.borderType":{"desc":"\n\n\n<p>the text fragment border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">borderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"emphasis.selectorLabel.rich.<style_name>.borderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">borderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"emphasis.selectorLabel.rich.<style_name>.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"emphasis.selectorLabel.rich.<style_name>.padding":{"desc":"\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}},"emphasis.selectorLabel.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"emphasis.selectorLabel.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.selectorLabel.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.selectorLabel.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.selectorLabel.rich.<style_name>.width":{"desc":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"emphasis.selectorLabel.rich.<style_name>.height":{"desc":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"emphasis.selectorLabel.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"emphasis.selectorLabel.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.selectorLabel.rich.<style_name>.textBorderType":{"desc":"\n\n\n<p>Stroke line type of the text.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">textBorderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"emphasis.selectorLabel.rich.<style_name>.textBorderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">textBorderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"emphasis.selectorLabel.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"emphasis.selectorLabel.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.selectorLabel.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.selectorLabel.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"selector":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The selector button in the legend component. Currently, there are two types of button:</p>\n<ul>\n<li><code class=\"codespan\">all</code>: Select All</li>\n<li><code class=\"codespan\">inverse</code>: Inverse Selection</li>\n</ul>\n<p>The selector button doesn't display by default, you need to enable it manually as follows.</p>\n<pre><code class=\"lang-ts\">selector: [\n {\n type: 'all',\n // can be any title you like\n title: 'All'\n },\n {\n type: 'inverse',\n // can be any title you like\n title: 'Inv'\n }\n]\n\n// or\nselector: true\n\n// or\nselector: ['all', 'inverse']\n</code></pre>\n"},"selectorLabel":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The text label style of the selector button, which is displayed by default.</p>\n"},"selectorLabel.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"true"}},"selectorLabel.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"selectorLabel.rotate":{"desc":"\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n","uiControl":{"type":"angle","default":"0","min":"-90","max":"90","step":"1"}},"selectorLabel.offset":{"desc":"\n\n<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n","uiControl":{"type":"vector","dims":"x,y","step":"0.5","separate":"true"}},"selectorLabel.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"selectorLabel.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"selectorLabel.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"selectorLabel.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"selectorLabel.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"selectorLabel.align":{"desc":"\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"enum","options":"left,center,right"}},"selectorLabel.verticalAlign":{"desc":"\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"selectorLabel.lineHeight":{"desc":"\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"selectorLabel.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"selectorLabel.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"selectorLabel.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"selectorLabel.borderType":{"desc":"\n\n\n<p>the text fragment border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">borderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"selectorLabel.borderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">borderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"selectorLabel.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"selectorLabel.padding":{"desc":"\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}},"selectorLabel.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"selectorLabel.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"selectorLabel.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"selectorLabel.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"selectorLabel.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"selectorLabel.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"selectorLabel.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"selectorLabel.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"selectorLabel.textBorderType":{"desc":"\n\n\n<p>Stroke line type of the text.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">textBorderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"selectorLabel.textBorderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">textBorderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"selectorLabel.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"selectorLabel.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"selectorLabel.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"selectorLabel.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"selectorLabel.overflow":{"desc":"\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"selectorLabel.ellipsis":{"desc":"<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n"},"selectorLabel.rich":{"desc":"<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-ts\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"selectorLabel.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"selectorLabel.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"selectorLabel.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"selectorLabel.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"selectorLabel.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"selectorLabel.rich.<style_name>.align":{"desc":"\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"enum","options":"left,center,right"}},"selectorLabel.rich.<style_name>.verticalAlign":{"desc":"\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"enum","options":"top,middle,bottom"}},"selectorLabel.rich.<style_name>.lineHeight":{"desc":"\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-ts\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","step":"1","default":"12"}},"selectorLabel.rich.<style_name>.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"selectorLabel.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"selectorLabel.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"selectorLabel.rich.<style_name>.borderType":{"desc":"\n\n\n<p>the text fragment border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">borderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"selectorLabel.rich.<style_name>.borderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">borderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"selectorLabel.rich.<style_name>.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"selectorLabel.rich.<style_name>.padding":{"desc":"\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n","uiControl":{"type":"vector","min":"0","dims":"T,R,B,L"}},"selectorLabel.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"selectorLabel.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"selectorLabel.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"selectorLabel.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"selectorLabel.rich.<style_name>.width":{"desc":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"selectorLabel.rich.<style_name>.height":{"desc":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n"},"selectorLabel.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"selectorLabel.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"selectorLabel.rich.<style_name>.textBorderType":{"desc":"\n\n\n<p>Stroke line type of the text.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n<p>Since <code class=\"codespan\">v5.0.0</code>, it can also be a number or a number array to specify the <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">dash array</a> of the line. With \n<code class=\"codespan\">textBorderDashOffset</code>\n, we can make the line style more flexible.</p>\n<p>For example：</p>\n<pre><code class=\"lang-ts\">{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n</code></pre>\n","uiControl":{"type":"enum","default":"solid","options":"solid,dashed,dotted"}},"selectorLabel.rich.<style_name>.textBorderDashOffset":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>To set the line dash offset. With \n<code class=\"codespan\">textBorderType</code>\n, we can make the line style more flexible.</p>\n<p>Refer to MDN <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\" target=\"_blank\">lineDashOffset</a> for more details.</p>\n","uiControl":{"type":"number","min":"0","step":"1","default":"0"}},"selectorLabel.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"selectorLabel.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"selectorLabel.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"selectorLabel.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"selectorPosition":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The position of the selector button, which can be placed at the end or start of the legend component, the corresponding values are <code class=\"codespan\">'end'</code> and <code class=\"codespan\">'start'</code>. By default, when the legend is laid out horizontally, the selector is placed at the end of it, and when the legend is laid out vertically, the selector is placed at the start of it.</p>\n","uiControl":{"type":"enum","options":"auto,start,end"}},"selectorItemGap":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The gap between the selector button.</p>\n","uiControl":{"type":"number","min":"0","default":"7","step":"0.5"}},"selectorButtonGap":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>The gap between selector button and legend component.</p>\n","uiControl":{"type":"number","min":"0","default":"10","step":"0.5"}}} |