window.__EC_DOC_option_series_lines = {"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"},"name":{"desc":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n"},"colorBy":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.2.0</code></p>\n</blockquote>\n<p>The policy to take color from <a href=\"#color\">option.color</a>. Valid values:</p>\n<ul>\n<li><code class=\"codespan\">&#39;series&#39;</code>: assigns the colors in the palette by series, so that all data in the same series are in the same color;</li>\n<li><code class=\"codespan\">&#39;data&#39;</code>: assigns colors in the palette according to data items, with each data item using a different color.</li>\n</ul>\n","uiControl":{"type":"enum","options":"series,data"}},"coordinateSystem":{"desc":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class=\"codespan\">&#39;cartesian2d&#39;</code></p>\n<p>  Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-lines.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-lines.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href=\"#series-lines.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n"},"xAxisIndex":{"desc":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n"},"yAxisIndex":{"desc":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n"},"geoIndex":{"desc":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n"},"polyline":{"desc":"<p>If draw as a polyline.</p>\n<p>Default to be <code class=\"codespan\">false</code>. Can only draw a two end straight line.</p>\n<p>If it is set true, <a href=\"#series-lines.data.coords\">data.coords</a> can have more than two coord to draw a polyline. It is useful when visualizing GPS track data. See example <a href=\"https://echarts.apache.org/examples/en/editor.html?c=lines-bmap-bus\" target=\"_blank\">lines-bus</a>.</p>\n"},"effect":{"desc":"<p>The setting about the special effects of lines.</p>\n<p><strong>Tips: </strong>All the graphs with trail effect should be put on a individual layer, which means that <a href=\"#series-lines.zlevel\">zlevel</a> need to be different with others. And the animation (<a href=\"#series-lines.animation\">animation</a>: false)  of this layer is suggested to be turned off at the meanwhile. Otherwise, other graphic elements in other series and the <a href=\"#series-lines.label\">label</a> of animation would produce unnecessary ghosts.</p>\n"},"effect.show":{"desc":"<p>Whether to show special effect.</p>\n"},"effect.period":{"desc":"<p>The duration of special effect, which unit is second.</p>\n"},"effect.delay":{"desc":"<p>Effect animation delay. Can be number or callback function.</p>\n"},"effect.constantSpeed":{"desc":"<p>If symbol movement of special effect has a constant speed, which unit is pixel per second. <a href=\"#series-lines.effect.period\">period</a> will be ignored if <code class=\"codespan\">constantSpeed</code> is larger than 0.</p>\n"},"effect.symbol":{"desc":"<p>The symbol of special effect.</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</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>&#39;image://http://example.website/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</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>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>The above example uses a custom path of plane shape.</p>\n<p><strong>Tip:</strong> Ahe angle of symbol changes as the tangent of track changes. If you use a custom path, you should make sure that the path shape are upward oriented. It would ensure that the symbol will always move toward the right moving direction when the symbol moves along the track.</p>\n"},"effect.symbolSize":{"desc":"<p>The symbol size of special effect, which could be set as single number such as <code class=\"codespan\">10</code>. What&#39;s more, arrays could be used to decribe the width and height respectively. For instance, <code class=\"codespan\">[20, 10]</code> indicates <code class=\"codespan\">20</code> for width and  <code class=\"codespan\">10</code> for height.</p>\n"},"effect.color":{"desc":"<p>The color of special effect symbol, which defaults to be same with <a href=\"#series-lines.lineStyle.color\">lineStyle.color</a>.</p>\n"},"effect.trailLength":{"desc":"<p>The length of trail of special effect.  The values from 0 to 1 could be set. Trail would be longer as the the value becomes larger.</p>\n"},"effect.loop":{"desc":"<p>Whether to loop the special effect animation.</p>\n"},"effect.roundTrip":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.4.0</code></p>\n</blockquote>\n<p>Whether to go back when the animation reach the end.</p>\n"},"large":{"desc":"<p>Whether to enable the optimization of large-scale lines graph. It could be enabled when there is a particularly large number of data(&gt;=5k) .</p>\n<p>After being enabled, <a href=\"#series-lines.largeThreshold\">largeThreshold</a> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>The style of a single data item can&#39;t be customized</p>\n"},"largeThreshold":{"desc":"<p>The threshold enabling the drawing optimization.</p>\n"},"symbol":{"desc":"<p>Symbol type at the two ends of the line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-line.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"desc":"<p>Symbol size at the two ends of the line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"lineStyle.color":{"desc":"\n\n<p>Line color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-ts\">(params: Object) =&gt; Color\n</code></pre>\n<p>Input parameters are <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code>, and etc. of data item.</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":"1","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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","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":"0.5","min":"0","max":"1","step":"0.01"}},"lineStyle.curveness":{"desc":"<p>The curveness of edge. The values from 0 to 1 could be set. The curveness would be larger as the the value becomes larger.</p>\n"},"label":{"desc":"<p>Label settings. Does not work when <a href=\"#series-lines.polyline\">polyline</a> is <code class=\"codespan\">true</code>.</p>\n"},"label.show":{"desc":"<p>Whether to show label.</p>\n"},"label.position":{"desc":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n"},"label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"label.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"label.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"}},"label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"label.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"}},"label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"label.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"}},"label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"label.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"}},"label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"label.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"}},"label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"label.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"}},"label.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"}},"label.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"}},"label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"label.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\">&#39;100%&#39;</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"},"label.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"},"label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"label.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"}},"label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"labelLayout":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>Unified layout configuration of labels.</p>\n<p>It provide a chance to adjust the labels&#39; <code class=\"codespan\">(x, y)</code> position, alignment based on the original layout each series provides.</p>\n<p>This option can be a callback with following parameters.</p>\n<pre><code class=\"lang-ts\">// corresponding index of data\ndataIndex: number\n// corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;\ndataType?: string\n// corresponding index of series\nseriesIndex: number\n// Displayed text of label.\ntext: string\n// Bounding rectangle of label.\nlabelRect: {x: number, y: number, width: number, height: number}\n// Horizontal alignment of label.\nalign: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;\n// Vertical alignment of label.\nverticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;\n// Bounding rectangle of the element corresponding to.\nrect: {x: number, y: number, width: number, height: number}\n// Default points array of labelLine. Currently only provided in pie and funnel series.\n// It&#39;s null in other series.\nlabelLinePoints?: number[][]\n</code></pre>\n<p><strong>Example:</strong></p>\n<p>Align the labels on the right. Left 10px margin to the edge.</p>\n<pre><code class=\"lang-ts\">labelLayout(params) {\n    return {\n        x: params.rect.x + 10,\n        y: params.rect.y + params.rect.height / 2,\n        verticalAlign: &#39;middle&#39;,\n        align: &#39;left&#39;\n    }\n}\n</code></pre>\n<p>Set the text size based on the size of element bounding rectangle.</p>\n<pre><code class=\"lang-ts\">\nlabelLayout(params) {\n    return {\n        fontSize: Math.max(params.rect.width / 10, 5)\n    };\n}\n</code></pre>\n"},"labelLayout.hideOverlap":{"desc":"<p>If hide the overlapped labels.</p>\n<p>The following example shows how to hide the overlapped labels in graph automatically when zooming.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=graph-label-overlap&edit=1&reset=1\" width=\"600\" height=\"400\"></iframe>\n\n"},"labelLayout.moveOverlap":{"desc":"<p>If move the overlapped labels to avoid overlapping.</p>\n<p>Currently supported configurations:</p>\n<ul>\n<li><code class=\"codespan\">&#39;shiftX&#39;</code> Place the labels on horizontal direction sequencely, used when aligned horizontally.</li>\n<li><code class=\"codespan\">&#39;shiftY&#39;</code> Place the labels on vertial direction sequencely, used when aligned vertically.</li>\n</ul>\n<p>The following example shows how to use <code class=\"codespan\">moverOverlap: &#39;shiftY&#39;</code> to place the labels aligned vertically.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=scatter-label-align-right&edit=1&reset=1\" width=\"600\" height=\"400\"></iframe>\n\n"},"labelLayout.x":{"desc":"<p>The x position of the label. Support absolute pixel values ​​or relative values ​​such as <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n"},"labelLayout.y":{"desc":"<p>The y position of the label. Support absolute pixel values ​​or relative values ​​such as <code class=\"codespan\">&#39;20%&#39;</code>.</p>\n"},"labelLayout.dx":{"desc":"<p>The pixel offset of the label in the x direction. Can be used with <code class=\"codespan\">x</code>.</p>\n"},"labelLayout.dy":{"desc":"<p>The pixel offset of the label in the y direction. Can be used with <code class=\"codespan\">y</code></p>\n"},"labelLayout.rotate":{"desc":"<p>Label rotation angle.</p>\n"},"labelLayout.width":{"desc":"<p>The width of displayed label. It can be used with <code class=\"codespan\">overflow</code> to constraint the label in a fixed width.</p>\n"},"labelLayout.height":{"desc":"<p>The height of displayed label.</p>\n"},"labelLayout.align":{"desc":"<p>The horizontal alignment of the label. Can be <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>.</p>\n"},"labelLayout.verticalAlign":{"desc":"<p>The vertical alignment of the label. Can be <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>.</p>\n"},"labelLayout.fontSize":{"desc":"<p>The text size of the label.</p>\n"},"labelLayout.draggable":{"desc":"<p>Whether to allow the user to adjust the position by dragging.</p>\n"},"labelLayout.labelLinePoints":{"desc":"<p>The array of the three points of the label guide line. The format is:</p>\n<pre><code class=\"lang-ts\">[[x, y], [x, y], [x, y]]\n</code></pre>\n<p>It is often used in pie charts to fine-tune the guide line that has been calculated. Usually not recommended to set it in other situations.</p>\n"},"emphasis":{"desc":"<p>Emphasis state.</p>\n"},"emphasis.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Whether to disable the emphasis state.</p>\n<p>When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.</p>\n","uiControl":{"type":"boolean","default":"false"}},"emphasis.focus":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:</p>\n<ul>\n<li><code class=\"codespan\">&#39;none&#39;</code> Do not fade out other data, it&#39;s by default.</li>\n<li><code class=\"codespan\">&#39;self&#39;</code> Only focus (not fade out) the element of the currently highlighted data.</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">&#39;series&#39;</code> Focus on all elements of the series which the currently highlighted data belongs to.</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-ts\">emphasis: {\n    focus: &#39;series&#39;,\n    blurScope: &#39;coordinateSystem&#39;\n}\n</code></pre>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1\" width=\"600\" height=\"400\"></iframe>\n\n\n\n"},"emphasis.blurScope":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>The range of fade out when <code class=\"codespan\">focus</code> is enabled. Support the following configurations</p>\n<ul>\n<li><code class=\"codespan\">&#39;coordinateSystem&#39;</code></li>\n<li><code class=\"codespan\">&#39;series&#39;</code></li>\n<li><code class=\"codespan\">&#39;global&#39;</code></li>\n</ul>\n"},"emphasis.lineStyle.color":{"desc":"\n\n<p>Line color. Can set to <code class=\"codespan\">&#39;inherit&#39;</code> in the <code class=\"codespan\">emphasis</code> state to disable color highlight.</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"}},"emphasis.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"emphasis.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"emphasis.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"}},"emphasis.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"emphasis.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"emphasis.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"}},"emphasis.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"emphasis.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"emphasis.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"emphasis.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"emphasis.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":"1","min":"0","max":"1","step":"0.01"}},"emphasis.label.show":{"desc":"<p>Whether to show label.</p>\n"},"emphasis.label.position":{"desc":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n"},"emphasis.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis.label.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"emphasis.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"emphasis.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"emphasis.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"emphasis.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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.label.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.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"emphasis.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"emphasis.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.label.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.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"emphasis.label.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.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"emphasis.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"emphasis.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"emphasis.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"emphasis.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.label.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.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"emphasis.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"emphasis.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"emphasis.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"emphasis.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\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.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"emphasis.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"emphasis.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"emphasis.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"emphasis.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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.label.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.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"emphasis.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"emphasis.label.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.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.label.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.label.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.label.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.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"emphasis.label.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.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.label.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\">&#39;100%&#39;</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.label.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.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"emphasis.label.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.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.label.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.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"emphasis.label.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.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"emphasis.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"blur":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>Configurations of blur state. Available when <a href=\"#series-lines.emphasis.focus\">emphasis.focus</a> is set.</p>\n"},"blur.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"}},"blur.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"blur.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"blur.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"}},"blur.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"blur.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"blur.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"}},"blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"blur.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"blur.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"blur.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"blur.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":"1","min":"0","max":"1","step":"0.01"}},"blur.label.show":{"desc":"<p>Whether to show label.</p>\n"},"blur.label.position":{"desc":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n"},"blur.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"blur.label.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"blur.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"blur.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"blur.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"blur.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"blur.label.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"}},"blur.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"blur.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"blur.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"blur.label.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"}},"blur.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"blur.label.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"}},"blur.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"blur.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"blur.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"blur.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"blur.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"blur.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"blur.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"blur.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"blur.label.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"}},"blur.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"blur.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"blur.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"blur.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"blur.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"blur.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"blur.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"blur.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"blur.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"blur.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"blur.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"blur.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"blur.label.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"}},"blur.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"blur.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"blur.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"blur.label.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"}},"blur.label.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"}},"blur.label.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"}},"blur.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"blur.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"blur.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"blur.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"blur.label.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\">&#39;100%&#39;</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"},"blur.label.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"},"blur.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"blur.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"blur.label.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"}},"blur.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"blur.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"blur.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"blur.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"select":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>Configurations of select state. Available when <a href=\"#series-lines.selectedMode\">selectedMode</a> is set.</p>\n"},"select.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>If data can be selected. Available when <code class=\"codespan\">selectedMode</code> is used. Can be used to disable selection for part of the data.</p>\n","uiControl":{"type":"boolean","default":"false"}},"select.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"}},"select.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"select.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"select.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"}},"select.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"select.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"select.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"}},"select.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"select.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"select.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"select.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"select.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":"1","min":"0","max":"1","step":"0.01"}},"select.label.show":{"desc":"<p>Whether to show label.</p>\n"},"select.label.position":{"desc":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n"},"select.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"select.label.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"select.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"select.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"select.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"select.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"select.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"select.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"select.label.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"}},"select.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"select.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"select.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"select.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"select.label.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"}},"select.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"select.label.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"}},"select.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"select.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"select.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"select.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"select.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"select.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"select.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"select.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"select.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"select.label.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"}},"select.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"select.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"select.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"select.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"select.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"select.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"select.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"select.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"select.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"select.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"select.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"select.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"select.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"select.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"select.label.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"}},"select.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"select.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"select.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"select.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"select.label.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"}},"select.label.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"}},"select.label.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"}},"select.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"select.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"select.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"select.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"select.label.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\">&#39;100%&#39;</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"},"select.label.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"},"select.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"select.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"select.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"select.label.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"}},"select.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"select.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"select.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"select.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"selectedMode":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>Selected mode. 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\">&#39;single&#39;</code>, <code class=\"codespan\">&#39;multiple&#39;</code> or <code class=\"codespan\">&#39;series&#39;</code>, for single selection, multiple selections and whole series selection.</p>\n<blockquote>\n<p><code class=\"codespan\">&#39;series&#39;</code> is supported since v5.3.0</p>\n</blockquote>\n","uiControl":{"type":"enum","options":"false,true,single,multiple,series"}},"progressive":{"desc":"<p><code class=\"codespan\">progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if &quot;progressive rendering&quot; enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, &quot;progressive rendering&quot; is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n<p>Set <code class=\"codespan\">progressive: 0</code> to disable progressive permanently. By default, progressive is auto-enabled when data amount is bigger than <code class=\"codespan\">progressiveThreshold</code>.</p>\n"},"progressiveThreshold":{"desc":"<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n"},"dataGroupId":{"desc":"<p>A groupID common to all data in the series. the groupID will be used to classify the data and determine how merge and split animations are performed in the universal transition animation.</p>\n<p>If you are using the <a href=\"#dataset\">dataset</a> component to represent the data, it is recommended to use <code class=\"codespan\">encode.itemGroupID</code> to specify which dimension is encoded as the groupID.</p>\n"},"data":{"desc":"<p>The data set of lines.</p>\n"},"data.name":{"desc":"<p>the name of data.</p>\n"},"data.groupId":{"desc":"<p>The groupID of this data item. groupID will be used to classify the data.</p>\n"},"data.coords":{"desc":"<p>An array includes two ore more than two coordinates. Each coordinate could be <code class=\"codespan\">[x, y]</code> in <a href=\"#grid\">rectangular coordinate</a> and <code class=\"codespan\">[lng, lat]</code> in <a href=\"#geo\">geographic coordinate</a>.</p>\n"},"data.lineStyle":{"desc":"<p>The line style of this data item.</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":"1","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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","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":"1","min":"0","max":"1","step":"0.01"}},"data.lineStyle.curveness":{"desc":"\n\n<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"}},"data.label":{"desc":"<p>Label of a single line. Available when <a href=\"#series-lines.polyline\">polyline</a> is not <code class=\"codespan\">true</code>.</p>\n"},"data.label.show":{"desc":"<p>Whether to show label.</p>\n"},"data.label.position":{"desc":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n"},"data.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"data.label.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"data.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"data.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"data.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"data.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"data.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"data.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"data.label.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"}},"data.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"data.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"data.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.label.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.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"data.label.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"}},"data.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"data.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"data.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"data.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"data.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"data.label.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"}},"data.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"data.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"data.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"data.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"data.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"data.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"data.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"data.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"data.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"data.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"data.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"data.label.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"}},"data.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"data.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"data.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.label.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"}},"data.label.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"}},"data.label.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"}},"data.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"data.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.label.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\">&#39;100%&#39;</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"},"data.label.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"},"data.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"data.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"data.label.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"}},"data.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"data.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.emphasis.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Whether to disable the emphasis state.</p>\n<p>When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.</p>\n","uiControl":{"type":"boolean","default":"false"}},"data.emphasis.lineStyle.color":{"desc":"\n\n<p>Line color. Can set to <code class=\"codespan\">&#39;inherit&#39;</code> in the <code class=\"codespan\">emphasis</code> state to disable color highlight.</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.emphasis.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"data.emphasis.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.emphasis.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.emphasis.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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.emphasis.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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.emphasis.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.emphasis.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"data.emphasis.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"data.emphasis.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.emphasis.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.emphasis.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":"1","min":"0","max":"1","step":"0.01"}},"data.emphasis.label.show":{"desc":"<p>Whether to show label.</p>\n"},"data.emphasis.label.position":{"desc":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n"},"data.emphasis.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"data.emphasis.label.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"data.emphasis.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"data.emphasis.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"data.emphasis.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"data.emphasis.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"data.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"data.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"data.emphasis.label.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"}},"data.emphasis.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"data.emphasis.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"data.emphasis.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.emphasis.label.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.emphasis.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"data.emphasis.label.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"}},"data.emphasis.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"data.emphasis.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.emphasis.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.emphasis.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.emphasis.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"data.emphasis.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"data.emphasis.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"data.emphasis.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"data.emphasis.label.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"}},"data.emphasis.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"data.emphasis.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.emphasis.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.emphasis.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.emphasis.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"data.emphasis.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"data.emphasis.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"data.emphasis.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"data.emphasis.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"data.emphasis.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"data.emphasis.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"data.emphasis.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"data.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"data.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"data.emphasis.label.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"}},"data.emphasis.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"data.emphasis.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"data.emphasis.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.emphasis.label.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"}},"data.emphasis.label.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"}},"data.emphasis.label.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"}},"data.emphasis.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"data.emphasis.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.emphasis.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.emphasis.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.emphasis.label.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\">&#39;100%&#39;</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"},"data.emphasis.label.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"},"data.emphasis.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"data.emphasis.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"data.emphasis.label.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"}},"data.emphasis.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"data.emphasis.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.emphasis.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.emphasis.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.blur":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n"},"data.blur.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.blur.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"data.blur.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.blur.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.blur.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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.blur.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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.blur.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.blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"data.blur.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"data.blur.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.blur.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.blur.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":"1","min":"0","max":"1","step":"0.01"}},"data.blur.label.show":{"desc":"<p>Whether to show label.</p>\n"},"data.blur.label.position":{"desc":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n"},"data.blur.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"data.blur.label.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"data.blur.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"data.blur.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"data.blur.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"data.blur.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"data.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"data.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"data.blur.label.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"}},"data.blur.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"data.blur.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"data.blur.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.blur.label.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.blur.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"data.blur.label.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"}},"data.blur.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"data.blur.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.blur.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.blur.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.blur.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"data.blur.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"data.blur.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"data.blur.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"data.blur.label.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"}},"data.blur.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"data.blur.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.blur.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.blur.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.blur.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"data.blur.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"data.blur.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"data.blur.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"data.blur.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"data.blur.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"data.blur.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"data.blur.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"data.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"data.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"data.blur.label.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"}},"data.blur.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"data.blur.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"data.blur.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.blur.label.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"}},"data.blur.label.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"}},"data.blur.label.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"}},"data.blur.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"data.blur.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.blur.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.blur.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.blur.label.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\">&#39;100%&#39;</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"},"data.blur.label.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"},"data.blur.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"data.blur.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"data.blur.label.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"}},"data.blur.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"data.blur.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.blur.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.blur.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.select":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n"},"data.select.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>If data can be selected. Available when <code class=\"codespan\">selectedMode</code> is used. Can be used to disable selection for part of the data.</p>\n","uiControl":{"type":"boolean","default":"false"}},"data.select.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.select.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"data.select.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.select.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.select.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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.select.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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.select.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.select.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"data.select.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"data.select.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.select.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.select.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":"1","min":"0","max":"1","step":"0.01"}},"data.select.label.show":{"desc":"<p>Whether to show label.</p>\n"},"data.select.label.position":{"desc":"<p>the position of label, options:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;end&#39;</code></li>\n</ul>\n"},"data.select.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"data.select.label.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"data.select.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"data.select.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"data.select.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"data.select.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"data.select.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"data.select.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"data.select.label.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"}},"data.select.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"data.select.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"data.select.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.select.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.select.label.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.select.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"data.select.label.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"}},"data.select.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"data.select.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.select.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.select.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.select.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"data.select.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"data.select.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"data.select.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.select.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"data.select.label.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"}},"data.select.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"data.select.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.select.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.select.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.select.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"data.select.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"data.select.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"data.select.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"null"}},"data.select.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"data.select.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"data.select.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"data.select.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"data.select.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"data.select.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"data.select.label.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"}},"data.select.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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"}},"data.select.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n","uiControl":{"type":"color","default":"#fff"}},"data.select.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.select.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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.select.label.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"}},"data.select.label.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"}},"data.select.label.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"}},"data.select.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"data.select.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.select.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.select.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.select.label.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\">&#39;100%&#39;</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"},"data.select.label.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"},"data.select.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"data.select.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.select.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"data.select.label.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"}},"data.select.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"data.select.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.select.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.select.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.tooltip":{"desc":"<p>tooltip settings in this series data.</p>\n"},"data.tooltip.position":{"desc":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-ts\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-ts\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-ts\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-ts\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"data.tooltip.formatter":{"desc":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string | HTMLElement | HTMLElement[]\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"data.tooltip.valueFormatter":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Callback function for formatting the value section in tooltip.</p>\n<p>Interface:</p>\n<pre><code class=\"lang-ts\">(value: number | string) =&gt; string\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Add $ prefix\nvalueFormatter: (value) =&gt; &#39;$&#39; + value.toFixed(2)\n</code></pre>\n"},"data.tooltip.backgroundColor":{"desc":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"data.tooltip.borderColor":{"desc":"\n\n\n\n\n<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","uiControl":{"type":"color","default":"#333"}},"data.tooltip.borderWidth":{"desc":"\n\n\n\n\n<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"data.tooltip.padding":{"desc":"\n\n\n\n\n<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n\n\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-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"}},"data.tooltip.textStyle":{"desc":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n"},"data.tooltip.textStyle.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"'#fff'"}},"data.tooltip.textStyle.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"data.tooltip.textStyle.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"data.tooltip.textStyle.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"data.tooltip.textStyle.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"}},"data.tooltip.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"}},"data.tooltip.textStyle.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"data.tooltip.textStyle.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"data.tooltip.textStyle.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"data.tooltip.textStyle.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.tooltip.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"data.tooltip.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"}},"data.tooltip.textStyle.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"data.tooltip.textStyle.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"data.tooltip.textStyle.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.tooltip.textStyle.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"data.tooltip.textStyle.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"data.tooltip.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"data.tooltip.extraCssText":{"desc":"\n\n\n\n\n<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-ts\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n","uiControl":{"type":"text"}},"markPoint":{"desc":"<p>Mark point in a chart.</p>\n"},"markPoint.symbol":{"desc":"\n\n<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</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>&#39;image://http://example.website/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</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>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-ts\">(value: Array|number, params: Object) =&gt; string\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-lines.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","uiControl":{"type":"icon","default":"circle"}},"markPoint.symbolSize":{"desc":"\n\n<p> symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-ts\">(value: Array|number, params: Object) =&gt; number|Array\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-lines.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n","uiControl":{"type":"number","min":"0"}},"markPoint.symbolRotate":{"desc":"\n\n<p>Rotate degree of  symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n<p>If rotation of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-ts\">(value: Array|number, params: Object) =&gt; number\n</code></pre>\n<p>The first parameter <code class=\"codespan\">value</code> is the value in <a href=\"#series-lines.data\">data</a>, and the second parameter <code class=\"codespan\">params</code> is the rest parameters of data item.</p>\n<blockquote>\n<p>Callback is supported since 4.8.0 .</p>\n</blockquote>\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"markPoint.symbolKeepAspect":{"desc":"\n\n<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","uiControl":{"type":"boolean","clean":"true"}},"markPoint.symbolOffset":{"desc":"\n\n<p>Offset of  symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;-50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"}},"markPoint.silent":{"desc":"\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","uiControl":{"type":"boolean"}},"markPoint.label":{"desc":"<p>Label of mark point.</p>\n"},"markPoint.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"true"}},"markPoint.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markPoint.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markPoint.label.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"}},"markPoint.label.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"}},"markPoint.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markPoint.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markPoint.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markPoint.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markPoint.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markPoint.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markPoint.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markPoint.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markPoint.label.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"}},"markPoint.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.label.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"}},"markPoint.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markPoint.label.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"}},"markPoint.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markPoint.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markPoint.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markPoint.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markPoint.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.label.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"}},"markPoint.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markPoint.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markPoint.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markPoint.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markPoint.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markPoint.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markPoint.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markPoint.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markPoint.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markPoint.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markPoint.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markPoint.label.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"}},"markPoint.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.label.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"}},"markPoint.label.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"}},"markPoint.label.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"}},"markPoint.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markPoint.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.label.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\">&#39;100%&#39;</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"},"markPoint.label.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"},"markPoint.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markPoint.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.label.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"}},"markPoint.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markPoint.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.itemStyle":{"desc":"<p>Mark point style.</p>\n"},"markPoint.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"}},"markPoint.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"}},"markPoint.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markPoint.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.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"}},"markPoint.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markPoint.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markPoint.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"}},"markPoint.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markPoint.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markPoint.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markPoint.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markPoint.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":"1","min":"0","max":"1","step":"0.01"}},"markPoint.emphasis":{"desc":"<p>Emphasis status of mark point.</p>\n"},"markPoint.emphasis.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Whether to disable the emphasis state.</p>\n<p>When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markPoint.emphasis.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markPoint.emphasis.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markPoint.emphasis.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markPoint.emphasis.label.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"}},"markPoint.emphasis.label.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"}},"markPoint.emphasis.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markPoint.emphasis.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markPoint.emphasis.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markPoint.emphasis.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markPoint.emphasis.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markPoint.emphasis.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markPoint.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markPoint.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markPoint.emphasis.label.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"}},"markPoint.emphasis.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.emphasis.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.emphasis.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.emphasis.label.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"}},"markPoint.emphasis.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markPoint.emphasis.label.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"}},"markPoint.emphasis.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markPoint.emphasis.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.emphasis.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.emphasis.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.emphasis.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markPoint.emphasis.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markPoint.emphasis.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markPoint.emphasis.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.emphasis.label.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"}},"markPoint.emphasis.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markPoint.emphasis.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.emphasis.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.emphasis.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.emphasis.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markPoint.emphasis.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markPoint.emphasis.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markPoint.emphasis.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markPoint.emphasis.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markPoint.emphasis.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markPoint.emphasis.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markPoint.emphasis.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markPoint.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markPoint.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markPoint.emphasis.label.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"}},"markPoint.emphasis.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.emphasis.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.emphasis.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.emphasis.label.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"}},"markPoint.emphasis.label.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"}},"markPoint.emphasis.label.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"}},"markPoint.emphasis.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markPoint.emphasis.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.emphasis.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.emphasis.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.emphasis.label.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\">&#39;100%&#39;</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"},"markPoint.emphasis.label.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"},"markPoint.emphasis.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markPoint.emphasis.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.emphasis.label.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"}},"markPoint.emphasis.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markPoint.emphasis.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.emphasis.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.emphasis.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.emphasis.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"}},"markPoint.emphasis.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"}},"markPoint.emphasis.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markPoint.emphasis.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.emphasis.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"}},"markPoint.emphasis.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markPoint.emphasis.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markPoint.emphasis.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"}},"markPoint.emphasis.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markPoint.emphasis.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markPoint.emphasis.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markPoint.emphasis.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markPoint.emphasis.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":"1","min":"0","max":"1","step":"0.01"}},"markPoint.blur":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>Configurations of blur state. Whether to blur follows the series.</p>\n"},"markPoint.blur.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markPoint.blur.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markPoint.blur.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markPoint.blur.label.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"}},"markPoint.blur.label.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"}},"markPoint.blur.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markPoint.blur.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markPoint.blur.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markPoint.blur.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markPoint.blur.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markPoint.blur.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markPoint.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markPoint.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markPoint.blur.label.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"}},"markPoint.blur.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.blur.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.blur.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.blur.label.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"}},"markPoint.blur.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markPoint.blur.label.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"}},"markPoint.blur.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markPoint.blur.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.blur.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.blur.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.blur.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markPoint.blur.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markPoint.blur.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markPoint.blur.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.blur.label.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"}},"markPoint.blur.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markPoint.blur.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.blur.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.blur.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.blur.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markPoint.blur.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markPoint.blur.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markPoint.blur.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markPoint.blur.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markPoint.blur.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markPoint.blur.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markPoint.blur.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markPoint.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markPoint.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markPoint.blur.label.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"}},"markPoint.blur.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.blur.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.blur.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.blur.label.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"}},"markPoint.blur.label.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"}},"markPoint.blur.label.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"}},"markPoint.blur.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markPoint.blur.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.blur.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.blur.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.blur.label.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\">&#39;100%&#39;</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"},"markPoint.blur.label.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"},"markPoint.blur.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markPoint.blur.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.blur.label.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"}},"markPoint.blur.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markPoint.blur.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.blur.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.blur.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.blur.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"}},"markPoint.blur.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"}},"markPoint.blur.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markPoint.blur.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.blur.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"}},"markPoint.blur.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markPoint.blur.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markPoint.blur.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"}},"markPoint.blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markPoint.blur.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markPoint.blur.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markPoint.blur.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markPoint.blur.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":"1","min":"0","max":"1","step":"0.01"}},"markPoint.data":{"desc":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-lines.markPoint.data.x\">x</a>, <a href=\"#series-lines.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-ts\">data: [\n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n"},"markPoint.data.name":{"desc":"<p>Mark point name.</p>\n"},"markPoint.data.x":{"desc":"\n\n<p>X position according to container, in pixel.</p>\n","uiControl":{"type":"percent","default":"0"}},"markPoint.data.y":{"desc":"\n\n<p>Y position according to container, in pixel.</p>\n","uiControl":{"type":"percent","default":"0"}},"markPoint.data.value":{"desc":"<p>Label value, which can be ignored.</p>\n"},"markPoint.data.symbol":{"desc":"\n\n<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</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>&#39;image://http://example.website/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</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>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","uiControl":{"type":"icon","default":"circle"}},"markPoint.data.symbolSize":{"desc":"\n\n<p> symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","uiControl":{"type":"number","min":"0"}},"markPoint.data.symbolRotate":{"desc":"\n\n<p>Rotate degree of  symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"markPoint.data.symbolKeepAspect":{"desc":"\n\n<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","uiControl":{"type":"boolean","clean":"true"}},"markPoint.data.symbolOffset":{"desc":"\n\n<p>Offset of  symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;-50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"}},"markPoint.data.itemStyle":{"desc":"<p>Mark point style.</p>\n"},"markPoint.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"}},"markPoint.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"}},"markPoint.data.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markPoint.data.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.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"}},"markPoint.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markPoint.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markPoint.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"}},"markPoint.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markPoint.data.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markPoint.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"}},"markPoint.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"}},"markPoint.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":"1","min":"0","max":"1","step":"0.01"}},"markPoint.data.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markPoint.data.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markPoint.data.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markPoint.data.label.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"}},"markPoint.data.label.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"}},"markPoint.data.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markPoint.data.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markPoint.data.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markPoint.data.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markPoint.data.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markPoint.data.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markPoint.data.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markPoint.data.label.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"}},"markPoint.data.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.data.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.data.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.data.label.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"}},"markPoint.data.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markPoint.data.label.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"}},"markPoint.data.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markPoint.data.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markPoint.data.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markPoint.data.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markPoint.data.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.data.label.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"}},"markPoint.data.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markPoint.data.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markPoint.data.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markPoint.data.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markPoint.data.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markPoint.data.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markPoint.data.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markPoint.data.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markPoint.data.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markPoint.data.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markPoint.data.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markPoint.data.label.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"}},"markPoint.data.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.data.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.data.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.data.label.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"}},"markPoint.data.label.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"}},"markPoint.data.label.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"}},"markPoint.data.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markPoint.data.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.label.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\">&#39;100%&#39;</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"},"markPoint.data.label.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"},"markPoint.data.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markPoint.data.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.data.label.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"}},"markPoint.data.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markPoint.data.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.emphasis.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Whether to disable the emphasis state.</p>\n<p>When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markPoint.data.emphasis.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markPoint.data.emphasis.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markPoint.data.emphasis.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markPoint.data.emphasis.label.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"}},"markPoint.data.emphasis.label.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"}},"markPoint.data.emphasis.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markPoint.data.emphasis.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markPoint.data.emphasis.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markPoint.data.emphasis.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markPoint.data.emphasis.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markPoint.data.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markPoint.data.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markPoint.data.emphasis.label.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"}},"markPoint.data.emphasis.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.data.emphasis.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.data.emphasis.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.data.emphasis.label.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"}},"markPoint.data.emphasis.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markPoint.data.emphasis.label.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"}},"markPoint.data.emphasis.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markPoint.data.emphasis.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.emphasis.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.emphasis.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.emphasis.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markPoint.data.emphasis.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markPoint.data.emphasis.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markPoint.data.emphasis.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.data.emphasis.label.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"}},"markPoint.data.emphasis.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markPoint.data.emphasis.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.emphasis.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.emphasis.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.emphasis.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markPoint.data.emphasis.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markPoint.data.emphasis.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markPoint.data.emphasis.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markPoint.data.emphasis.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markPoint.data.emphasis.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markPoint.data.emphasis.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markPoint.data.emphasis.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markPoint.data.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markPoint.data.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markPoint.data.emphasis.label.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"}},"markPoint.data.emphasis.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.data.emphasis.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markPoint.data.emphasis.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.data.emphasis.label.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"}},"markPoint.data.emphasis.label.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"}},"markPoint.data.emphasis.label.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"}},"markPoint.data.emphasis.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markPoint.data.emphasis.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.emphasis.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.emphasis.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.emphasis.label.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\">&#39;100%&#39;</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"},"markPoint.data.emphasis.label.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"},"markPoint.data.emphasis.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markPoint.data.emphasis.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.data.emphasis.label.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"}},"markPoint.data.emphasis.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markPoint.data.emphasis.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markPoint.data.emphasis.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.emphasis.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markPoint.data.emphasis.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"}},"markPoint.data.emphasis.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"}},"markPoint.data.emphasis.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markPoint.data.emphasis.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markPoint.data.emphasis.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"}},"markPoint.data.emphasis.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markPoint.data.emphasis.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markPoint.data.emphasis.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"}},"markPoint.data.emphasis.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markPoint.data.emphasis.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markPoint.data.emphasis.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markPoint.data.emphasis.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markPoint.data.emphasis.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":"1","min":"0","max":"1","step":"0.01"}},"markPoint.animation":{"desc":"\n\n<p>Whether to enable animation.</p>\n","uiControl":{"type":"boolean","default":"true","clean":"true"}},"markPoint.animationThreshold":{"desc":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"markPoint.animationDuration":{"desc":"\n\n<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-ts\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"}},"markPoint.animationEasing":{"desc":"\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/en/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"}},"markPoint.animationDelay":{"desc":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"markPoint.animationDurationUpdate":{"desc":"\n\n<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-ts\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"}},"markPoint.animationEasingUpdate":{"desc":"\n\n<p>Easing method used for animation.</p>\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"}},"markPoint.animationDelayUpdate":{"desc":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"markLine":{"desc":"<p>Use a line in the chart to illustrate.</p>\n"},"markLine.silent":{"desc":"\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","uiControl":{"type":"boolean"}},"markLine.symbol":{"desc":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-lines.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"markLine.symbolSize":{"desc":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class=\"codespan\">symbolSize</code>.</p>\n"},"markLine.precision":{"desc":"<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n"},"markLine.label":{"desc":"<p>Mark line text.</p>\n"},"markLine.label.show":{"desc":"<p>Whether show label or not.</p>\n"},"markLine.label.position":{"desc":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since v4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=line-markline&reset=1&edit=1\" width=\"800\" height=\"500\"></iframe>\n\n"},"markLine.label.distance":{"desc":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"markLine.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markLine.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.label.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"}},"markLine.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.label.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"}},"markLine.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markLine.label.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"}},"markLine.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markLine.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markLine.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.label.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"}},"markLine.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markLine.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markLine.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markLine.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markLine.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markLine.label.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"}},"markLine.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.label.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"}},"markLine.label.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"}},"markLine.label.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"}},"markLine.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.label.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\">&#39;100%&#39;</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"},"markLine.label.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"},"markLine.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.label.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"}},"markLine.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.lineStyle":{"desc":"<p>Mark line style.</p>\n"},"markLine.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"}},"markLine.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"markLine.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.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"}},"markLine.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markLine.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markLine.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"}},"markLine.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markLine.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markLine.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.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":"1","min":"0","max":"1","step":"0.01"}},"markLine.lineStyle.curveness":{"desc":"\n\n<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"}},"markLine.emphasis":{"desc":"<p>Emphasis status of mark line.</p>\n"},"markLine.emphasis.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Whether to disable the emphasis state.</p>\n<p>When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markLine.emphasis.label.show":{"desc":"<p>Whether show label or not.</p>\n"},"markLine.emphasis.label.position":{"desc":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since v4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=line-markline&reset=1&edit=1\" width=\"800\" height=\"500\"></iframe>\n\n"},"markLine.emphasis.label.distance":{"desc":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"markLine.emphasis.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markLine.emphasis.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.emphasis.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.emphasis.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.emphasis.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.emphasis.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.emphasis.label.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"}},"markLine.emphasis.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.emphasis.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.emphasis.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.emphasis.label.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"}},"markLine.emphasis.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markLine.emphasis.label.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"}},"markLine.emphasis.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.emphasis.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.emphasis.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.emphasis.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.emphasis.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markLine.emphasis.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markLine.emphasis.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.emphasis.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.emphasis.label.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"}},"markLine.emphasis.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.emphasis.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.emphasis.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.emphasis.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.emphasis.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markLine.emphasis.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markLine.emphasis.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markLine.emphasis.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.emphasis.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.emphasis.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.emphasis.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.emphasis.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markLine.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markLine.emphasis.label.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"}},"markLine.emphasis.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.emphasis.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.emphasis.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.emphasis.label.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"}},"markLine.emphasis.label.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"}},"markLine.emphasis.label.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"}},"markLine.emphasis.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.emphasis.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.emphasis.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.emphasis.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.emphasis.label.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\">&#39;100%&#39;</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"},"markLine.emphasis.label.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"},"markLine.emphasis.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.emphasis.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.emphasis.label.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"}},"markLine.emphasis.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.emphasis.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.emphasis.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.emphasis.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.emphasis.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"}},"markLine.emphasis.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"markLine.emphasis.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.emphasis.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"}},"markLine.emphasis.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markLine.emphasis.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markLine.emphasis.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"}},"markLine.emphasis.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markLine.emphasis.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markLine.emphasis.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.emphasis.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.emphasis.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":"1","min":"0","max":"1","step":"0.01"}},"markLine.blur":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>Configurations of blur state. Whether to blur follows the series.</p>\n"},"markLine.blur.label.show":{"desc":"<p>Whether show label or not.</p>\n"},"markLine.blur.label.position":{"desc":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since v4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=line-markline&reset=1&edit=1\" width=\"800\" height=\"500\"></iframe>\n\n"},"markLine.blur.label.distance":{"desc":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"markLine.blur.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markLine.blur.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.blur.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.blur.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.blur.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.blur.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.blur.label.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"}},"markLine.blur.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.blur.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.blur.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.blur.label.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"}},"markLine.blur.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markLine.blur.label.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"}},"markLine.blur.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.blur.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.blur.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.blur.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.blur.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markLine.blur.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markLine.blur.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.blur.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.blur.label.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"}},"markLine.blur.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.blur.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.blur.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.blur.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.blur.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markLine.blur.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markLine.blur.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markLine.blur.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.blur.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.blur.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.blur.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.blur.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markLine.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markLine.blur.label.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"}},"markLine.blur.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.blur.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.blur.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.blur.label.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"}},"markLine.blur.label.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"}},"markLine.blur.label.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"}},"markLine.blur.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.blur.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.blur.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.blur.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.blur.label.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\">&#39;100%&#39;</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"},"markLine.blur.label.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"},"markLine.blur.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.blur.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.blur.label.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"}},"markLine.blur.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.blur.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.blur.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.blur.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.blur.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"}},"markLine.blur.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"markLine.blur.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.blur.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"}},"markLine.blur.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markLine.blur.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markLine.blur.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"}},"markLine.blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markLine.blur.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markLine.blur.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.blur.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.blur.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":"1","min":"0","max":"1","step":"0.01"}},"markLine.data":{"desc":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-lines.markLine.data.0.x\">x</a>, <a href=\"#series-lines.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n\n[\n        {\n            name: &#39;Mark line between two points&#39;,\n            x: 100,\n            y: 100\n        },\n        {\n            x: 500,\n            y: 200\n        }\n    ]\n]\n</code></pre>"},"markLine.data.0":{"desc":"<p>Data of the starting point.</p>\n"},"markLine.data.0.name":{"desc":"<p>Name of the marker, which will display as a label.</p>\n"},"markLine.data.0.x":{"desc":"\n\n<p>X position according to container, in pixel.</p>\n","uiControl":{"type":"percent","default":"0"}},"markLine.data.0.y":{"desc":"\n\n<p>Y position according to container, in pixel.</p>\n","uiControl":{"type":"percent","default":"0"}},"markLine.data.0.xAxis":{"desc":"<p>Markline at x at given value, which only works for single data item. Example:</p>\n<pre><code>data: [{\n    name: &#39;A vertical line with X valued 100&#39;,\n    xAxis: 100\n}]\n</code></pre><p>or if xAxis is in <code class=\"codespan\">&#39;time&#39;</code> type, it can be set as:</p>\n<pre><code>{\n    name: &#39;A vertical line with X valued &quot;2020-01-01&quot;&#39;,\n    xAxis: &#39;2020-01-01&#39;\n}]\n</code></pre>"},"markLine.data.0.yAxis":{"desc":"<p>Markline at y at given value, which only works for single data item. Example:</p>\n<pre><code>data: [{\n    name: &#39;A horizontal line with X valued 100&#39;,\n    yAxis: 100\n}]\n</code></pre><p>or if yAxis is in <code class=\"codespan\">&#39;time&#39;</code> type, it can be set as:</p>\n<pre><code>{\n    name: &#39;A horizontal line with Y valued &quot;2020-01-01&quot;&#39;,\n    yAxis: &#39;2020-01-01&#39;\n}]\n</code></pre>"},"markLine.data.0.value":{"desc":"<p>Label value, which can be ignored.</p>\n"},"markLine.data.0.symbol":{"desc":"\n\n<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</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>&#39;image://http://example.website/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</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>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","uiControl":{"type":"icon","default":"circle"}},"markLine.data.0.symbolSize":{"desc":"\n\n<p>starting point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","uiControl":{"type":"number","min":"0"}},"markLine.data.0.symbolRotate":{"desc":"\n\n<p>Rotate degree of starting point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"markLine.data.0.symbolKeepAspect":{"desc":"\n\n<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","uiControl":{"type":"boolean","clean":"true"}},"markLine.data.0.symbolOffset":{"desc":"\n\n<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;-50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"}},"markLine.data.0.lineStyle":{"desc":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n"},"markLine.data.0.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"}},"markLine.data.0.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"markLine.data.0.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.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"}},"markLine.data.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markLine.data.0.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markLine.data.0.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"}},"markLine.data.0.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markLine.data.0.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markLine.data.0.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.0.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.0.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":"1","min":"0","max":"1","step":"0.01"}},"markLine.data.0.lineStyle.curveness":{"desc":"\n\n<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"}},"markLine.data.0.label":{"desc":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n"},"markLine.data.0.label.show":{"desc":"<p>Whether show label or not.</p>\n"},"markLine.data.0.label.position":{"desc":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since v4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=line-markline&reset=1&edit=1\" width=\"800\" height=\"500\"></iframe>\n\n"},"markLine.data.0.label.distance":{"desc":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"markLine.data.0.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markLine.data.0.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.0.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.0.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.0.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.0.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.0.label.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"}},"markLine.data.0.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.label.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"}},"markLine.data.0.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markLine.data.0.label.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"}},"markLine.data.0.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markLine.data.0.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markLine.data.0.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.label.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"}},"markLine.data.0.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.0.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markLine.data.0.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markLine.data.0.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markLine.data.0.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.0.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.0.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.0.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.0.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.0.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markLine.data.0.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markLine.data.0.label.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"}},"markLine.data.0.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.label.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"}},"markLine.data.0.label.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"}},"markLine.data.0.label.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"}},"markLine.data.0.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.label.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\">&#39;100%&#39;</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"},"markLine.data.0.label.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"},"markLine.data.0.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.label.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"}},"markLine.data.0.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.0.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.emphasis.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Whether to disable the emphasis state.</p>\n<p>When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markLine.data.0.emphasis.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"}},"markLine.data.0.emphasis.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"markLine.data.0.emphasis.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.emphasis.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"}},"markLine.data.0.emphasis.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markLine.data.0.emphasis.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markLine.data.0.emphasis.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"}},"markLine.data.0.emphasis.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markLine.data.0.emphasis.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markLine.data.0.emphasis.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.0.emphasis.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.0.emphasis.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":"1","min":"0","max":"1","step":"0.01"}},"markLine.data.0.emphasis.lineStyle.curveness":{"desc":"\n\n<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"}},"markLine.data.0.emphasis.label.show":{"desc":"<p>Whether show label or not.</p>\n"},"markLine.data.0.emphasis.label.position":{"desc":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since v4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=line-markline&reset=1&edit=1\" width=\"800\" height=\"500\"></iframe>\n\n"},"markLine.data.0.emphasis.label.distance":{"desc":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"markLine.data.0.emphasis.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markLine.data.0.emphasis.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.0.emphasis.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.0.emphasis.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.0.emphasis.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.0.emphasis.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.0.emphasis.label.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"}},"markLine.data.0.emphasis.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.emphasis.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.emphasis.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.emphasis.label.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"}},"markLine.data.0.emphasis.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markLine.data.0.emphasis.label.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"}},"markLine.data.0.emphasis.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.emphasis.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.emphasis.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.emphasis.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.emphasis.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markLine.data.0.emphasis.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markLine.data.0.emphasis.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.emphasis.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.emphasis.label.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"}},"markLine.data.0.emphasis.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.0.emphasis.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.emphasis.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.emphasis.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.emphasis.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markLine.data.0.emphasis.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markLine.data.0.emphasis.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markLine.data.0.emphasis.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.0.emphasis.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.0.emphasis.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.0.emphasis.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.0.emphasis.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.0.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markLine.data.0.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markLine.data.0.emphasis.label.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"}},"markLine.data.0.emphasis.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.emphasis.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.emphasis.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.emphasis.label.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"}},"markLine.data.0.emphasis.label.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"}},"markLine.data.0.emphasis.label.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"}},"markLine.data.0.emphasis.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.emphasis.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.emphasis.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.emphasis.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.emphasis.label.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\">&#39;100%&#39;</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"},"markLine.data.0.emphasis.label.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"},"markLine.data.0.emphasis.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.emphasis.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.emphasis.label.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"}},"markLine.data.0.emphasis.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.0.emphasis.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.emphasis.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.emphasis.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.blur":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n"},"markLine.data.0.blur.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"}},"markLine.data.0.blur.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"markLine.data.0.blur.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.blur.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"}},"markLine.data.0.blur.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markLine.data.0.blur.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markLine.data.0.blur.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"}},"markLine.data.0.blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markLine.data.0.blur.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markLine.data.0.blur.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.0.blur.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.0.blur.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":"1","min":"0","max":"1","step":"0.01"}},"markLine.data.0.blur.lineStyle.curveness":{"desc":"\n\n<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"}},"markLine.data.0.blur.label.show":{"desc":"<p>Whether show label or not.</p>\n"},"markLine.data.0.blur.label.position":{"desc":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since v4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=line-markline&reset=1&edit=1\" width=\"800\" height=\"500\"></iframe>\n\n"},"markLine.data.0.blur.label.distance":{"desc":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"markLine.data.0.blur.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markLine.data.0.blur.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.0.blur.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.0.blur.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.0.blur.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.0.blur.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.0.blur.label.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"}},"markLine.data.0.blur.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.blur.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.blur.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.blur.label.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"}},"markLine.data.0.blur.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markLine.data.0.blur.label.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"}},"markLine.data.0.blur.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.blur.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.blur.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.blur.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.blur.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markLine.data.0.blur.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markLine.data.0.blur.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.blur.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.blur.label.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"}},"markLine.data.0.blur.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.0.blur.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.blur.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.blur.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.blur.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markLine.data.0.blur.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markLine.data.0.blur.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markLine.data.0.blur.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.0.blur.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.0.blur.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.0.blur.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.0.blur.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.0.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markLine.data.0.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markLine.data.0.blur.label.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"}},"markLine.data.0.blur.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.blur.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.0.blur.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.blur.label.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"}},"markLine.data.0.blur.label.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"}},"markLine.data.0.blur.label.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"}},"markLine.data.0.blur.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.blur.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.blur.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.blur.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.blur.label.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\">&#39;100%&#39;</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"},"markLine.data.0.blur.label.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"},"markLine.data.0.blur.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.0.blur.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.0.blur.label.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"}},"markLine.data.0.blur.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.0.blur.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.0.blur.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.0.blur.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1":{"desc":"<p>Data of the ending point.</p>\n"},"markLine.data.1.name":{"desc":"<p>Name of the marker, which will display as a label.</p>\n"},"markLine.data.1.x":{"desc":"\n\n<p>X position according to container, in pixel.</p>\n","uiControl":{"type":"percent","default":"0"}},"markLine.data.1.y":{"desc":"\n\n<p>Y position according to container, in pixel.</p>\n","uiControl":{"type":"percent","default":"0"}},"markLine.data.1.xAxis":{"desc":"<p>Markline at x at given value, which only works for single data item. Example:</p>\n<pre><code>data: [{\n    name: &#39;A vertical line with X valued 100&#39;,\n    xAxis: 100\n}]\n</code></pre><p>or if xAxis is in <code class=\"codespan\">&#39;time&#39;</code> type, it can be set as:</p>\n<pre><code>{\n    name: &#39;A vertical line with X valued &quot;2020-01-01&quot;&#39;,\n    xAxis: &#39;2020-01-01&#39;\n}]\n</code></pre>"},"markLine.data.1.yAxis":{"desc":"<p>Markline at y at given value, which only works for single data item. Example:</p>\n<pre><code>data: [{\n    name: &#39;A horizontal line with X valued 100&#39;,\n    yAxis: 100\n}]\n</code></pre><p>or if yAxis is in <code class=\"codespan\">&#39;time&#39;</code> type, it can be set as:</p>\n<pre><code>{\n    name: &#39;A horizontal line with Y valued &quot;2020-01-01&quot;&#39;,\n    yAxis: &#39;2020-01-01&#39;\n}]\n</code></pre>"},"markLine.data.1.value":{"desc":"<p>Label value, which can be ignored.</p>\n"},"markLine.data.1.symbol":{"desc":"\n\n<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>It can be set to an image with <code class=\"codespan\">&#39;image://url&#39;</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>&#39;image://http://example.website/a/b.png&#39;\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">&#39;path://&#39;</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>&#39;path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z&#39;\n</code></pre>","uiControl":{"type":"icon","default":"circle"}},"markLine.data.1.symbolSize":{"desc":"\n\n<p>ending point symbol size. It can be set to single numbers like <code class=\"codespan\">10</code>, or use an array to represent width and height. For example, <code class=\"codespan\">[20, 10]</code> means symbol width is <code class=\"codespan\">20</code>, and height is<code class=\"codespan\">10</code>.</p>\n","uiControl":{"type":"number","min":"0"}},"markLine.data.1.symbolRotate":{"desc":"\n\n<p>Rotate degree of ending point symbol. The negative value represents clockwise. Note that when <code class=\"codespan\">symbol</code> is set to be <code class=\"codespan\">&#39;arrow&#39;</code> in <code class=\"codespan\">markLine</code>, <code class=\"codespan\">symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n","uiControl":{"type":"angle","min":"-180","max":"180","step":"1"}},"markLine.data.1.symbolKeepAspect":{"desc":"\n\n<p>Whether to keep aspect for symbols in the form of <code class=\"codespan\">path://</code>.</p>\n","uiControl":{"type":"boolean","clean":"true"}},"markLine.data.1.symbolOffset":{"desc":"\n\n<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code class=\"codespan\">[0, &#39;-50%&#39;]</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","uiControl":{"type":"vector","separate":"true","dims":"x,y"}},"markLine.data.1.lineStyle":{"desc":"<p>Line style of this data item, which will be merged with <code class=\"codespan\">lineStyle</code> of starting point and ending point.</p>\n"},"markLine.data.1.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"}},"markLine.data.1.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"markLine.data.1.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.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"}},"markLine.data.1.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markLine.data.1.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markLine.data.1.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"}},"markLine.data.1.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markLine.data.1.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markLine.data.1.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.1.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.1.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":"1","min":"0","max":"1","step":"0.01"}},"markLine.data.1.lineStyle.curveness":{"desc":"\n\n<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"}},"markLine.data.1.label":{"desc":"<p>Label of this data item, which will be merged with <code class=\"codespan\">label</code> of starting point and ending point.</p>\n"},"markLine.data.1.label.show":{"desc":"<p>Whether show label or not.</p>\n"},"markLine.data.1.label.position":{"desc":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since v4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=line-markline&reset=1&edit=1\" width=\"800\" height=\"500\"></iframe>\n\n"},"markLine.data.1.label.distance":{"desc":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"markLine.data.1.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markLine.data.1.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.1.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.1.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.1.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.1.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.1.label.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"}},"markLine.data.1.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.label.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"}},"markLine.data.1.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markLine.data.1.label.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"}},"markLine.data.1.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markLine.data.1.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markLine.data.1.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.label.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"}},"markLine.data.1.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.1.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markLine.data.1.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markLine.data.1.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markLine.data.1.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.1.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.1.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.1.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.1.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.1.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markLine.data.1.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markLine.data.1.label.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"}},"markLine.data.1.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.label.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"}},"markLine.data.1.label.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"}},"markLine.data.1.label.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"}},"markLine.data.1.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.label.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\">&#39;100%&#39;</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"},"markLine.data.1.label.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"},"markLine.data.1.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.label.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"}},"markLine.data.1.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.1.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.emphasis.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Whether to disable the emphasis state.</p>\n<p>When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markLine.data.1.emphasis.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"}},"markLine.data.1.emphasis.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"markLine.data.1.emphasis.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.emphasis.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"}},"markLine.data.1.emphasis.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markLine.data.1.emphasis.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markLine.data.1.emphasis.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"}},"markLine.data.1.emphasis.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markLine.data.1.emphasis.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markLine.data.1.emphasis.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.1.emphasis.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.1.emphasis.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":"1","min":"0","max":"1","step":"0.01"}},"markLine.data.1.emphasis.lineStyle.curveness":{"desc":"\n\n<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"}},"markLine.data.1.emphasis.label.show":{"desc":"<p>Whether show label or not.</p>\n"},"markLine.data.1.emphasis.label.position":{"desc":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since v4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=line-markline&reset=1&edit=1\" width=\"800\" height=\"500\"></iframe>\n\n"},"markLine.data.1.emphasis.label.distance":{"desc":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"markLine.data.1.emphasis.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markLine.data.1.emphasis.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.1.emphasis.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.1.emphasis.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.1.emphasis.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.1.emphasis.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.1.emphasis.label.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"}},"markLine.data.1.emphasis.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.emphasis.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.emphasis.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.emphasis.label.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"}},"markLine.data.1.emphasis.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markLine.data.1.emphasis.label.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"}},"markLine.data.1.emphasis.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.emphasis.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.emphasis.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.emphasis.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.emphasis.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markLine.data.1.emphasis.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markLine.data.1.emphasis.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.emphasis.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.emphasis.label.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"}},"markLine.data.1.emphasis.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.1.emphasis.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.emphasis.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.emphasis.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.emphasis.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markLine.data.1.emphasis.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markLine.data.1.emphasis.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markLine.data.1.emphasis.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.1.emphasis.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.1.emphasis.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.1.emphasis.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.1.emphasis.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.1.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markLine.data.1.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markLine.data.1.emphasis.label.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"}},"markLine.data.1.emphasis.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.emphasis.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.emphasis.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.emphasis.label.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"}},"markLine.data.1.emphasis.label.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"}},"markLine.data.1.emphasis.label.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"}},"markLine.data.1.emphasis.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.emphasis.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.emphasis.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.emphasis.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.emphasis.label.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\">&#39;100%&#39;</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"},"markLine.data.1.emphasis.label.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"},"markLine.data.1.emphasis.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.emphasis.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.emphasis.label.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"}},"markLine.data.1.emphasis.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.1.emphasis.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.emphasis.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.emphasis.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.blur":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n"},"markLine.data.1.blur.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"}},"markLine.data.1.blur.lineStyle.width":{"desc":"\n\n<p> line width.</p>\n","uiControl":{"type":"number","value":"1","min":"0","step":"0.5"}},"markLine.data.1.blur.lineStyle.type":{"desc":"\n\n\n<p>line type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.blur.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"}},"markLine.data.1.blur.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markLine.data.1.blur.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markLine.data.1.blur.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"}},"markLine.data.1.blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markLine.data.1.blur.lineStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markLine.data.1.blur.lineStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.1.blur.lineStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markLine.data.1.blur.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":"1","min":"0","max":"1","step":"0.01"}},"markLine.data.1.blur.lineStyle.curveness":{"desc":"\n\n<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","uiControl":{"type":"number","min":"0","max":"1","step":"0.01","default":"0"}},"markLine.data.1.blur.label.show":{"desc":"<p>Whether show label or not.</p>\n"},"markLine.data.1.blur.label.position":{"desc":"<p>Positions of labels can be:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code> starting point of the line.</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code> middle point of the line.</li>\n<li><code class=\"codespan\">&#39;end&#39;</code> ending point of the line.</li>\n</ul>\n<p>Since v4.7.0, more label positions are supported: <code class=\"codespan\">&#39;start&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;end&#39;</code>, <code class=\"codespan\">&#39;insideStartTop&#39;</code>, <code class=\"codespan\">&#39;insideStartBottom&#39;</code>, <code class=\"codespan\">&#39;insideMiddleTop&#39;</code>, <code class=\"codespan\">&#39;insideMiddleBottom&#39;</code>, <code class=\"codespan\">&#39;insideEndTop&#39;</code>, <code class=\"codespan\">&#39;insideEndBottom&#39;</code>.</p>\n<p><code class=\"codespan\">&#39;insideMiddleBottom&#39;</code> is the same as <code class=\"codespan\">&#39;middle&#39;</code>. Position is as the following chart.</p>\n<p>The distance between labels and mark lines can be set with <a href=\"#series-.markLine.label.distance\">label.distance</a>.</p>\n<iframe  data-src=\"https://echarts.apache.org/examples/en/view.html?c=line-markline&reset=1&edit=1\" width=\"800\" height=\"500\"></iframe>\n\n"},"markLine.data.1.blur.label.distance":{"desc":"<p>The distance between labels and mark lines. If it&#39;s an array, then the first element is the horizontal distance, and the second element is the vertical distance. If it&#39;s a number, then the horizontal and vertical distances are the same.</p>\n"},"markLine.data.1.blur.label.formatter":{"desc":"<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{d}</code>: the percent.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">&#39;xxx&#39;</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">&#39;product&#39;</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b}: {d}&#39;\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"markLine.data.1.blur.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.1.blur.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.1.blur.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.1.blur.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.1.blur.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.1.blur.label.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"}},"markLine.data.1.blur.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.blur.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.blur.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.blur.label.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"}},"markLine.data.1.blur.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markLine.data.1.blur.label.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"}},"markLine.data.1.blur.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.blur.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.blur.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.blur.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.blur.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markLine.data.1.blur.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markLine.data.1.blur.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.blur.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.blur.label.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"}},"markLine.data.1.blur.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.1.blur.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.blur.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.blur.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.blur.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markLine.data.1.blur.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markLine.data.1.blur.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markLine.data.1.blur.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markLine.data.1.blur.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markLine.data.1.blur.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markLine.data.1.blur.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markLine.data.1.blur.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markLine.data.1.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markLine.data.1.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markLine.data.1.blur.label.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"}},"markLine.data.1.blur.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.blur.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markLine.data.1.blur.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.blur.label.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"}},"markLine.data.1.blur.label.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"}},"markLine.data.1.blur.label.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"}},"markLine.data.1.blur.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.blur.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.blur.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.blur.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.blur.label.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\">&#39;100%&#39;</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"},"markLine.data.1.blur.label.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"},"markLine.data.1.blur.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markLine.data.1.blur.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markLine.data.1.blur.label.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"}},"markLine.data.1.blur.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markLine.data.1.blur.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markLine.data.1.blur.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.data.1.blur.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markLine.animation":{"desc":"\n\n<p>Whether to enable animation.</p>\n","uiControl":{"type":"boolean","default":"true","clean":"true"}},"markLine.animationThreshold":{"desc":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"markLine.animationDuration":{"desc":"\n\n<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-ts\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"}},"markLine.animationEasing":{"desc":"\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/en/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"}},"markLine.animationDelay":{"desc":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"markLine.animationDurationUpdate":{"desc":"\n\n<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-ts\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"}},"markLine.animationEasingUpdate":{"desc":"\n\n<p>Easing method used for animation.</p>\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"}},"markLine.animationDelayUpdate":{"desc":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"markArea":{"desc":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n"},"markArea.silent":{"desc":"\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","uiControl":{"type":"boolean"}},"markArea.label":{"desc":"<p>Label in mark area.</p>\n"},"markArea.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markArea.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markArea.label.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"}},"markArea.label.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"}},"markArea.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.label.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"}},"markArea.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.label.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"}},"markArea.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markArea.label.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"}},"markArea.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markArea.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markArea.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.label.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"}},"markArea.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markArea.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markArea.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markArea.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.label.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"}},"markArea.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.label.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"}},"markArea.label.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"}},"markArea.label.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"}},"markArea.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.label.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\">&#39;100%&#39;</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"},"markArea.label.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"},"markArea.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.label.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"}},"markArea.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.itemStyle":{"desc":"<p>Style of the mark area.</p>\n"},"markArea.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"}},"markArea.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"}},"markArea.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markArea.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.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"}},"markArea.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markArea.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markArea.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"}},"markArea.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markArea.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markArea.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.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":"1","min":"0","max":"1","step":"0.01"}},"markArea.emphasis":{"desc":"<p>Emphasis status of mark area.</p>\n"},"markArea.emphasis.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Whether to disable the emphasis state.</p>\n<p>When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.emphasis.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.emphasis.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markArea.emphasis.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markArea.emphasis.label.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"}},"markArea.emphasis.label.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"}},"markArea.emphasis.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.emphasis.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.emphasis.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.emphasis.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.emphasis.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.emphasis.label.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"}},"markArea.emphasis.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.emphasis.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.emphasis.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.emphasis.label.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"}},"markArea.emphasis.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markArea.emphasis.label.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"}},"markArea.emphasis.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.emphasis.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.emphasis.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.emphasis.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.emphasis.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markArea.emphasis.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markArea.emphasis.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.emphasis.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.emphasis.label.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"}},"markArea.emphasis.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.emphasis.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.emphasis.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.emphasis.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.emphasis.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markArea.emphasis.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markArea.emphasis.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markArea.emphasis.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.emphasis.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.emphasis.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.emphasis.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.emphasis.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.emphasis.label.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"}},"markArea.emphasis.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.emphasis.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.emphasis.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.emphasis.label.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"}},"markArea.emphasis.label.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"}},"markArea.emphasis.label.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"}},"markArea.emphasis.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.emphasis.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.emphasis.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.emphasis.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.emphasis.label.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\">&#39;100%&#39;</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"},"markArea.emphasis.label.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"},"markArea.emphasis.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.emphasis.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.emphasis.label.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"}},"markArea.emphasis.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.emphasis.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.emphasis.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.emphasis.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.emphasis.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"}},"markArea.emphasis.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"}},"markArea.emphasis.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markArea.emphasis.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.emphasis.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"}},"markArea.emphasis.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markArea.emphasis.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markArea.emphasis.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"}},"markArea.emphasis.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markArea.emphasis.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markArea.emphasis.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.emphasis.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.emphasis.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":"1","min":"0","max":"1","step":"0.01"}},"markArea.blur":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>Configurations of blur state. Whether to blur follows the series.</p>\n"},"markArea.blur.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.blur.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markArea.blur.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markArea.blur.label.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"}},"markArea.blur.label.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"}},"markArea.blur.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.blur.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.blur.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.blur.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.blur.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.blur.label.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"}},"markArea.blur.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.blur.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.blur.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.blur.label.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"}},"markArea.blur.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markArea.blur.label.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"}},"markArea.blur.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.blur.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.blur.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.blur.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.blur.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markArea.blur.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markArea.blur.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.blur.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.blur.label.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"}},"markArea.blur.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.blur.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.blur.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.blur.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.blur.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markArea.blur.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markArea.blur.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markArea.blur.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.blur.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.blur.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.blur.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.blur.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.blur.label.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"}},"markArea.blur.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.blur.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.blur.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.blur.label.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"}},"markArea.blur.label.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"}},"markArea.blur.label.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"}},"markArea.blur.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.blur.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.blur.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.blur.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.blur.label.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\">&#39;100%&#39;</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"},"markArea.blur.label.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"},"markArea.blur.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.blur.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.blur.label.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"}},"markArea.blur.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.blur.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.blur.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.blur.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.blur.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"}},"markArea.blur.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"}},"markArea.blur.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markArea.blur.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.blur.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"}},"markArea.blur.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markArea.blur.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markArea.blur.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"}},"markArea.blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markArea.blur.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markArea.blur.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.blur.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.blur.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":"1","min":"0","max":"1","step":"0.01"}},"markArea.data":{"desc":"<p>The scope of the area is defined by <code class=\"codespan\">data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-lines.markArea.data.0.x\">x</a>, <a href=\"#series-lines.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code class=\"codespan\">5</code>), or percent (e.g., the value is <code class=\"codespan\">&#39;35%&#39;</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n[\n        {\n            name: &#39;Mark area in two screen points&#39;,\n            x: 100,\n            y: 100\n        }, {\n            x: &#39;90%&#39;,\n            y: &#39;10%&#39;\n        }\n    ]\n]\n</code></pre>"},"markArea.data.0":{"desc":"<p>Specify the left-top point.</p>\n"},"markArea.data.0.name":{"desc":"<p>Name of the marker, which will display as a label.</p>\n"},"markArea.data.0.x":{"desc":"\n\n<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n","uiControl":{"type":"percent","default":"0"}},"markArea.data.0.y":{"desc":"\n\n<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n","uiControl":{"type":"percent","default":"0"}},"markArea.data.0.value":{"desc":"<p>value of the item, not necessary.</p>\n"},"markArea.data.0.itemStyle":{"desc":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n"},"markArea.data.0.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"}},"markArea.data.0.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"}},"markArea.data.0.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markArea.data.0.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.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"}},"markArea.data.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markArea.data.0.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markArea.data.0.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"}},"markArea.data.0.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markArea.data.0.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markArea.data.0.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.0.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.0.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":"1","min":"0","max":"1","step":"0.01"}},"markArea.data.0.label":{"desc":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n"},"markArea.data.0.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.data.0.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markArea.data.0.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markArea.data.0.label.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"}},"markArea.data.0.label.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"}},"markArea.data.0.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.0.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.0.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.0.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.0.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.0.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.0.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.0.label.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"}},"markArea.data.0.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.label.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"}},"markArea.data.0.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markArea.data.0.label.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"}},"markArea.data.0.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markArea.data.0.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markArea.data.0.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.label.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"}},"markArea.data.0.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.0.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markArea.data.0.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markArea.data.0.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markArea.data.0.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.0.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.0.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.0.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.0.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.0.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.0.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.0.label.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"}},"markArea.data.0.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.label.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"}},"markArea.data.0.label.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"}},"markArea.data.0.label.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"}},"markArea.data.0.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.label.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\">&#39;100%&#39;</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"},"markArea.data.0.label.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"},"markArea.data.0.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.label.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"}},"markArea.data.0.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.0.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.emphasis.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Whether to disable the emphasis state.</p>\n<p>When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.data.0.emphasis.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"}},"markArea.data.0.emphasis.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"}},"markArea.data.0.emphasis.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markArea.data.0.emphasis.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.emphasis.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"}},"markArea.data.0.emphasis.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markArea.data.0.emphasis.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markArea.data.0.emphasis.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"}},"markArea.data.0.emphasis.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markArea.data.0.emphasis.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markArea.data.0.emphasis.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.0.emphasis.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.0.emphasis.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":"1","min":"0","max":"1","step":"0.01"}},"markArea.data.0.emphasis.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.data.0.emphasis.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markArea.data.0.emphasis.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markArea.data.0.emphasis.label.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"}},"markArea.data.0.emphasis.label.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"}},"markArea.data.0.emphasis.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.0.emphasis.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.0.emphasis.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.0.emphasis.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.0.emphasis.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.0.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.0.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.0.emphasis.label.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"}},"markArea.data.0.emphasis.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.emphasis.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.emphasis.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.emphasis.label.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"}},"markArea.data.0.emphasis.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markArea.data.0.emphasis.label.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"}},"markArea.data.0.emphasis.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.emphasis.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.emphasis.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.emphasis.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.emphasis.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markArea.data.0.emphasis.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markArea.data.0.emphasis.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.emphasis.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.emphasis.label.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"}},"markArea.data.0.emphasis.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.0.emphasis.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.emphasis.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.emphasis.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.emphasis.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markArea.data.0.emphasis.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markArea.data.0.emphasis.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markArea.data.0.emphasis.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.0.emphasis.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.0.emphasis.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.0.emphasis.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.0.emphasis.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.0.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.0.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.0.emphasis.label.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"}},"markArea.data.0.emphasis.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.emphasis.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.emphasis.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.emphasis.label.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"}},"markArea.data.0.emphasis.label.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"}},"markArea.data.0.emphasis.label.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"}},"markArea.data.0.emphasis.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.emphasis.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.emphasis.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.emphasis.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.emphasis.label.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\">&#39;100%&#39;</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"},"markArea.data.0.emphasis.label.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"},"markArea.data.0.emphasis.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.emphasis.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.emphasis.label.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"}},"markArea.data.0.emphasis.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.0.emphasis.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.emphasis.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.emphasis.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.blur":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n"},"markArea.data.0.blur.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"}},"markArea.data.0.blur.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"}},"markArea.data.0.blur.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markArea.data.0.blur.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.blur.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"}},"markArea.data.0.blur.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markArea.data.0.blur.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markArea.data.0.blur.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"}},"markArea.data.0.blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markArea.data.0.blur.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markArea.data.0.blur.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.0.blur.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.0.blur.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":"1","min":"0","max":"1","step":"0.01"}},"markArea.data.0.blur.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.data.0.blur.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markArea.data.0.blur.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markArea.data.0.blur.label.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"}},"markArea.data.0.blur.label.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"}},"markArea.data.0.blur.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.0.blur.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.0.blur.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.0.blur.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.0.blur.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.0.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.0.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.0.blur.label.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"}},"markArea.data.0.blur.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.blur.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.blur.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.blur.label.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"}},"markArea.data.0.blur.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markArea.data.0.blur.label.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"}},"markArea.data.0.blur.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.blur.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.blur.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.blur.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.blur.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markArea.data.0.blur.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markArea.data.0.blur.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.blur.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.blur.label.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"}},"markArea.data.0.blur.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.0.blur.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.blur.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.blur.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.blur.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markArea.data.0.blur.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markArea.data.0.blur.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markArea.data.0.blur.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.0.blur.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.0.blur.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.0.blur.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.0.blur.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.0.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.0.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.0.blur.label.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"}},"markArea.data.0.blur.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.blur.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.0.blur.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.blur.label.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"}},"markArea.data.0.blur.label.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"}},"markArea.data.0.blur.label.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"}},"markArea.data.0.blur.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.blur.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.blur.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.blur.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.blur.label.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\">&#39;100%&#39;</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"},"markArea.data.0.blur.label.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"},"markArea.data.0.blur.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.0.blur.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.0.blur.label.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"}},"markArea.data.0.blur.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.0.blur.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.0.blur.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.0.blur.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1":{"desc":"<p>Specify the right-bottom point.</p>\n"},"markArea.data.1.name":{"desc":"<p>Name of the marker, which will display as a label.</p>\n"},"markArea.data.1.x":{"desc":"\n\n<p>x value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n","uiControl":{"type":"percent","default":"0"}},"markArea.data.1.y":{"desc":"\n\n<p>y value on screen coordinate system, can be pixel number (like <code class=\"codespan\">5</code>), or percent value (like <code class=\"codespan\">&#39;20%&#39;</code>).</p>\n","uiControl":{"type":"percent","default":"0"}},"markArea.data.1.value":{"desc":"<p>value of the item, not necessary.</p>\n"},"markArea.data.1.itemStyle":{"desc":"<p>Style of the item.\n<code class=\"codespan\">itemStyle</code> of start point and end point will be merged together.</p>\n"},"markArea.data.1.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"}},"markArea.data.1.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"}},"markArea.data.1.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markArea.data.1.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.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"}},"markArea.data.1.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markArea.data.1.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markArea.data.1.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"}},"markArea.data.1.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markArea.data.1.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markArea.data.1.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.1.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.1.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":"1","min":"0","max":"1","step":"0.01"}},"markArea.data.1.label":{"desc":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n"},"markArea.data.1.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.data.1.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markArea.data.1.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markArea.data.1.label.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"}},"markArea.data.1.label.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"}},"markArea.data.1.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.1.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.1.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.1.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.1.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.1.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.1.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.1.label.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"}},"markArea.data.1.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.label.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"}},"markArea.data.1.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markArea.data.1.label.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"}},"markArea.data.1.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markArea.data.1.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markArea.data.1.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.label.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"}},"markArea.data.1.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.1.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markArea.data.1.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markArea.data.1.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markArea.data.1.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.1.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.1.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.1.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.1.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.1.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.1.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.1.label.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"}},"markArea.data.1.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.label.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"}},"markArea.data.1.label.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"}},"markArea.data.1.label.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"}},"markArea.data.1.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.label.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\">&#39;100%&#39;</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"},"markArea.data.1.label.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"},"markArea.data.1.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.label.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"}},"markArea.data.1.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.1.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.emphasis.disabled":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Whether to disable the emphasis state.</p>\n<p>When emphasis state is disabled. There will be no highlight effect when the mouse hovered the element, tooltip is triggered, or the legend is hovered. It can be used to improve interaction fluency when there are massive graphic elements.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.data.1.emphasis.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"}},"markArea.data.1.emphasis.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"}},"markArea.data.1.emphasis.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markArea.data.1.emphasis.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.emphasis.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"}},"markArea.data.1.emphasis.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markArea.data.1.emphasis.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markArea.data.1.emphasis.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"}},"markArea.data.1.emphasis.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markArea.data.1.emphasis.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markArea.data.1.emphasis.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.1.emphasis.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.1.emphasis.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":"1","min":"0","max":"1","step":"0.01"}},"markArea.data.1.emphasis.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.data.1.emphasis.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markArea.data.1.emphasis.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markArea.data.1.emphasis.label.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"}},"markArea.data.1.emphasis.label.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"}},"markArea.data.1.emphasis.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.1.emphasis.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.1.emphasis.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.1.emphasis.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.1.emphasis.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.1.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.1.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.1.emphasis.label.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"}},"markArea.data.1.emphasis.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.emphasis.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.emphasis.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.emphasis.label.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"}},"markArea.data.1.emphasis.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markArea.data.1.emphasis.label.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"}},"markArea.data.1.emphasis.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.emphasis.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.emphasis.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.emphasis.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.emphasis.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markArea.data.1.emphasis.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markArea.data.1.emphasis.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.emphasis.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.emphasis.label.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"}},"markArea.data.1.emphasis.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.1.emphasis.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.emphasis.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.emphasis.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.emphasis.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markArea.data.1.emphasis.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markArea.data.1.emphasis.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markArea.data.1.emphasis.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.1.emphasis.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.1.emphasis.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.1.emphasis.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.1.emphasis.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.1.emphasis.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.1.emphasis.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.1.emphasis.label.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"}},"markArea.data.1.emphasis.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.emphasis.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.emphasis.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.emphasis.label.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"}},"markArea.data.1.emphasis.label.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"}},"markArea.data.1.emphasis.label.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"}},"markArea.data.1.emphasis.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.emphasis.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.emphasis.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.emphasis.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.emphasis.label.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\">&#39;100%&#39;</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"},"markArea.data.1.emphasis.label.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"},"markArea.data.1.emphasis.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.emphasis.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.emphasis.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.emphasis.label.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"}},"markArea.data.1.emphasis.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.1.emphasis.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.emphasis.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.emphasis.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.blur":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n"},"markArea.data.1.blur.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"}},"markArea.data.1.blur.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"}},"markArea.data.1.blur.itemStyle.borderWidth":{"desc":"\n\n<p> border width. No border when it is set to be 0.</p>\n<p> border width. No border when it is set to be 0.</p>\n","uiControl":{"type":"number","value":"0","min":"0","step":"0.5"}},"markArea.data.1.blur.itemStyle.borderType":{"desc":"\n\n\n<p> border type.</p>\n<p>Possible values are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.blur.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"}},"markArea.data.1.blur.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\">&#39;butt&#39;</code>: The ends of lines are squared off at the endpoints.</li>\n<li><code class=\"codespan\">&#39;round&#39;</code>: The ends of lines are rounded.</li>\n<li><code class=\"codespan\">&#39;square&#39;</code>: The ends of lines are squared off by adding a box with an equal width and half the height of the line&#39;s thickness.</li>\n</ul>\n<p>Default value is <code class=\"codespan\">&#39;butt&#39;</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"}},"markArea.data.1.blur.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\">&#39;bevel&#39;</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\">&#39;round&#39;</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\">&#39;miter&#39;</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\">&#39;bevel&#39;</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"}},"markArea.data.1.blur.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"}},"markArea.data.1.blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n","uiControl":{"type":"number","default":"","min":"0","step":"0.5"}},"markArea.data.1.blur.itemStyle.shadowColor":{"desc":"\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n","uiControl":{"type":"color","default":""}},"markArea.data.1.blur.itemStyle.shadowOffsetX":{"desc":"\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.1.blur.itemStyle.shadowOffsetY":{"desc":"\n\n<p>Offset distance on the vertical direction of shadow.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"markArea.data.1.blur.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":"1","min":"0","max":"1","step":"0.01"}},"markArea.data.1.blur.label.show":{"desc":"\n\n<p>Whether to show label.</p>\n","uiControl":{"type":"boolean","default":"false"}},"markArea.data.1.blur.label.position":{"desc":"\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p>  Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n  For example:</p>\n<pre><code class=\"lang-ts\">  // Absolute pixel values\n  position: [10, 10],\n  // Relative percentage\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p>&#39;top&#39;</p>\n</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;inside&#39;</li>\n<li>&#39;insideLeft&#39;</li>\n<li>&#39;insideRight&#39;</li>\n<li>&#39;insideTop&#39;</li>\n<li>&#39;insideBottom&#39;</li>\n<li>&#39;insideTopLeft&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideTopRight&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"enum","options":"top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"}},"markArea.data.1.blur.label.distance":{"desc":"\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","uiControl":{"type":"number","default":"5","min":"0","step":"0.5"}},"markArea.data.1.blur.label.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"}},"markArea.data.1.blur.label.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"}},"markArea.data.1.blur.label.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.1.blur.label.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.1.blur.label.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.1.blur.label.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.1.blur.label.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.1.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.1.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.1.blur.label.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"}},"markArea.data.1.blur.label.backgroundColor":{"desc":"\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.blur.label.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.blur.label.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.blur.label.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"}},"markArea.data.1.blur.label.borderRadius":{"desc":"\n\n<p>Border radius of the text fragment.</p>\n","uiControl":{"type":"vector","min":"0","dims":"LT,RT, RB, LB"}},"markArea.data.1.blur.label.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"}},"markArea.data.1.blur.label.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.blur.label.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.blur.label.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.blur.label.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.blur.label.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"markArea.data.1.blur.label.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"markArea.data.1.blur.label.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.blur.label.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.blur.label.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"}},"markArea.data.1.blur.label.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.1.blur.label.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.blur.label.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.blur.label.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.blur.label.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"markArea.data.1.blur.label.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"markArea.data.1.blur.label.rich":{"desc":"<p>&quot;Rich text styles&quot; 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 &#39;rich&#39; can be applied to some fragments\n    // of text by adding some markers to those fragment, like\n    // `{styleName|text content text content}`.\n    // `&#39;\\n&#39;` is the newline character.\n    formatter: [\n        &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;\n        &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n"},"markArea.data.1.blur.label.rich.<style_name>.color":{"desc":"\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"null"}},"markArea.data.1.blur.label.rich.<style_name>.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"markArea.data.1.blur.label.rich.<style_name>.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"markArea.data.1.blur.label.rich.<style_name>.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"markArea.data.1.blur.label.rich.<style_name>.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"12","min":"1","step":"1"}},"markArea.data.1.blur.label.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</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"}},"markArea.data.1.blur.label.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\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</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"}},"markArea.data.1.blur.label.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"}},"markArea.data.1.blur.label.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-ts\">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\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\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.blur.label.rich.<style_name>.borderColor":{"desc":"\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color","default":"#fff"}},"markArea.data.1.blur.label.rich.<style_name>.borderWidth":{"desc":"\n\n<p>Border width of the text fragment.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.blur.label.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"}},"markArea.data.1.blur.label.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"}},"markArea.data.1.blur.label.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"}},"markArea.data.1.blur.label.rich.<style_name>.shadowColor":{"desc":"\n\n<p>Shadow color of the text block.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.blur.label.rich.<style_name>.shadowBlur":{"desc":"\n\n<p>Show blur of the text block.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.blur.label.rich.<style_name>.shadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.blur.label.rich.<style_name>.shadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text block.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.blur.label.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\">&#39;100%&#39;</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"},"markArea.data.1.blur.label.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"},"markArea.data.1.blur.label.rich.<style_name>.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n<p>If set as <code class=\"codespan\">&#39;inherit&#39;</code>, the color will assigned as visual color, such as series color.</p>\n","uiControl":{"type":"color"}},"markArea.data.1.blur.label.rich.<style_name>.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.blur.label.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"markArea.data.1.blur.label.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"}},"markArea.data.1.blur.label.rich.<style_name>.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"markArea.data.1.blur.label.rich.<style_name>.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"markArea.data.1.blur.label.rich.<style_name>.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.data.1.blur.label.rich.<style_name>.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"markArea.animation":{"desc":"\n\n<p>Whether to enable animation.</p>\n","uiControl":{"type":"boolean","default":"false","clean":"true"}},"markArea.animationThreshold":{"desc":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"markArea.animationDuration":{"desc":"\n\n<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-ts\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"}},"markArea.animationEasing":{"desc":"\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/en/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"}},"markArea.animationDelay":{"desc":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"markArea.animationDurationUpdate":{"desc":"\n\n<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-ts\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"}},"markArea.animationEasingUpdate":{"desc":"\n\n<p>Easing method used for animation.</p>\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"}},"markArea.animationDelayUpdate":{"desc":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"clip":{"desc":"\n\n\n\n<blockquote>\n<p>Since <code class=\"codespan\">v4.4.0</code></p>\n</blockquote>\n<p>If clip the overflow on the coordinate system. Clip results varies between series:</p>\n<ul>\n<li>Scatter/EffectScatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.</li>\n<li>Bar：Clip all the overflowed. With bar width kept.</li>\n<li>Line：Clip the overflowed line.</li>\n<li>Lines: Clip all the overflowed.</li>\n<li>Candlestick: Ignore the elements exceeds the coordinate system.</li>\n<li>Custom: Clip all the olverflowed.</li>\n</ul>\n<p>All these series have default value <code class=\"codespan\">true</code> except custom series. Set it to <code class=\"codespan\">false</code> if you don&#39;t want to clip.</p>\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"},"silent":{"desc":"\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","uiControl":{"type":"boolean"}},"animation":{"desc":"\n\n<p>Whether to enable animation.</p>\n","uiControl":{"type":"boolean","default":"true","clean":"true"}},"animationThreshold":{"desc":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n"},"animationDuration":{"desc":"\n\n<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-ts\">animationDuration: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20","clean":"true"}},"animationEasing":{"desc":"\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/en/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut","clean":"true"}},"animationDelay":{"desc":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"animationDurationUpdate":{"desc":"\n\n<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-ts\">animationDurationUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n","uiControl":{"type":"number","min":"0","default":"1000","step":"20"}},"animationEasingUpdate":{"desc":"\n\n<p>Easing method used for animation.</p>\n","uiControl":{"type":"enum","options":"linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"}},"animationDelayUpdate":{"desc":"<p>Delay before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">animationDelayUpdate: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n"},"universalTransition":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.2.0</code></p>\n</blockquote>\n<p>Configuration related to universal transition animation.</p>\n<p>Universal Transition provides the ability to morph between any series. With this feature enabled, each time <code class=\"codespan\">setOption</code>, transitions between series with the same <code class=\"codespan\">id</code> will be automatically associated with each other.</p>\n<p>One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying groups of data such as <code class=\"codespan\">encode.itemGroupId</code> or <code class=\"codespan\">dataGroupId</code>.</p>\n<p>This can be enabled directly by configuring <code class=\"codespan\">universalTransition: true</code> in the series. It is also possible to provide an object for more detailed configuration.</p>\n"},"universalTransition.enabled":{"desc":"<p>Wheather to enable the universal transition animation.</p>\n"},"universalTransition.seriesKey":{"desc":"<p>The <code class=\"codespan\">seriesKey</code> determines how the series to be animated is associated, it defaults to the <code class=\"codespan\">id</code> of the series when not configured.</p>\n<p>Usually this is configured as a string, and transitions between series with the same <code class=\"codespan\">seriesKey</code> will be applied. It can also be configured as an array like the following.</p>\n<pre><code class=\"lang-ts\">seriesKey: [&#39;male&#39;, &#39;female&#39;]\n</code></pre>\n<p>Configuring to an array means that all series specified by the array item will be merged into the current series when animating. For example, this configuration means that series with <code class=\"codespan\">id</code> or <code class=\"codespan\">seriesKey</code> of <code class=\"codespan\">&#39;male&#39;</code> and <code class=\"codespan\">&#39;female&#39;</code> will be merged into the current series.</p>\n"},"universalTransition.divideShape":{"desc":"<p><code class=\"codespan\">divideShape</code> determines how the elements in the current series will split into multiple elements in a one-to-many or many-to-one animation. Currently supports</p>\n<ul>\n<li><code class=\"codespan\">&#39;split&#39;</code> Split the shape into multiple shapes.</li>\n<li><code class=\"codespan\">&#39;clone&#39;</code> Get multiple clones from the current element.</li>\n</ul>\n<p>For better results, different series will have different configurations by default, for example, <a href=\"#series-scatter\">scatter</a> with smaller and more complex element uses <code class=\"codespan\">&#39;clone&#39;</code> by default, while more regular ones like bar charts default to <code class=\"codespan\">&#39;split&#39;</code>. You can set this to the desired splitting strategy according to the needs of your own scenario.</p>\n"},"universalTransition.delay":{"desc":"<pre><code class=\"lang-ts\">(index: number, count: number) =&gt; number\n</code></pre>\n<p>Configure the animation delay for each shape in a one-to-many or many-to-one animation. Setting different animation delays can bring a more instereting animation. For example, the following code creates a staggered effect with a random delay for each shape.</p>\n<pre><code class=\"lang-ts\">delay: function (index, count) {\n    return Math.random() * 1000;\n}\n</code></pre>\n"},"tooltip":{"desc":"<p>tooltip settings in this series.</p>\n"},"tooltip.position":{"desc":"<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p>  Display the position of tooltip&#39;s floating layer through array, which supports absolute position and relative percentage.</p>\n<p>  Example:</p>\n<pre><code class=\"lang-ts\">  // absolute position, which is 10px to the left side and 10px to the top side of the container\n  position: [10, 10]\n  // relative position, in the exact center of the container\n  position: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p>  Callback function in the following form:</p>\n<pre><code class=\"lang-ts\">  (point: Array, params: Object|Array.&lt;Object&gt;, dom: HTMLDomElement, rect: Object, size: Object) =&gt; Array\n</code></pre>\n<p>  <strong>Parameters:</strong><br>\n  point: Mouse position.<br>\n  param: The same as formatter.<br>\n  dom: The DOM object of tooltip.<br>\n  rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, and <code class=\"codespan\">height</code>.<br>\n  size: The size of dom echarts container. For example: <code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p>  <strong>Return:</strong><br>\n  Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n  Or can be an object, like <code class=\"codespan\">{left: 10, top: 30}</code>, or <code class=\"codespan\">{right: &#39;20%&#39;, bottom: 40}</code>.<br></p>\n<p>  For example:</p>\n<pre><code class=\"lang-ts\">  position: function (point, params, dom, rect, size) {\n      // fixed at top\n      return [point[0], &#39;10%&#39;];\n  }\n</code></pre>\n<p>  Or:</p>\n<pre><code class=\"lang-ts\">  position: function (pos, params, dom, rect, size) {\n      // tooltip will be fixed on the right if mouse hovering on the left,\n      // and on the left if hovering on the right.\n      var obj = {top: 60};\n      obj[[&#39;left&#39;, &#39;right&#39;][+(pos[0] &lt; size.viewSize[0] / 2)]] = 5;\n      return obj;\n  }\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">&#39;inside&#39;</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;top&#39;</code></p>\n<p>  Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;left&#39;</code></p>\n<p>  Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;right&#39;</code></p>\n<p>  Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n<li><p><code class=\"codespan\">&#39;bottom&#39;</code></p>\n<p>  Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.</p>\n</li>\n</ul>\n"},"tooltip.formatter":{"desc":"<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> and <code class=\"codespan\">{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code class=\"codespan\">&#39;axis&#39;</code>, there may be data from multiple series. In this time, series index can be refered as <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, or <code class=\"codespan\">{a2}</code>.</p>\n<p><code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for category name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Map: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for area name, <code class=\"codespan\">{c}</code> for merging data, <code class=\"codespan\">{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code class=\"codespan\">{a}</code> for series name, <code class=\"codespan\">{b}</code> for data item name, <code class=\"codespan\">{c}</code> for data value, <code class=\"codespan\">{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-ts\">formatter: &#39;{b0}: {c0}&lt;br /&gt;{b1}: {c1}&#39;\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-ts\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) =&gt; string | HTMLElement | HTMLElement[]\n</code></pre>\n<p>The first parameter <code class=\"codespan\">params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string,\n    // The percentage of current data item in the pie/funnel series\n    percent: number,\n    // The ancestors of current node in the sunburst series (including self)\n    treePathInfo: Array,\n    // The ancestors of current node in the tree/treemap series (including self)\n    treeAncestors: Array\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code class=\"codespan\">&#39;axis&#39;</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code class=\"codespan\">params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-ts\">{\n    componentType: &#39;series&#39;,\n    // Series type\n    seriesType: string,\n    // Series index in option.series\n    seriesIndex: number,\n    // Series name\n    seriesName: string,\n    // Data name, or category name\n    name: string,\n    // Data index in input data array\n    dataIndex: number,\n    // Original data as input\n    data: Object,\n    // Value of data. In most series it is the same as data.\n    // But in some series it is some part of the data (e.g., in map, radar)\n    value: number|Array|Object,\n    // encoding info of coordinate system\n    // Key: coord, like (&#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39;)\n    // value: Must be an array, not null/undefined. Contain dimension indices, like:\n    // {\n    //     x: [2] // values on dimension index 2 are mapped to x axis.\n    //     y: [0] // values on dimension index 0 are mapped to y axis.\n    // }\n    encode: Object,\n    // dimension names list\n    dimensionNames: Array&lt;String&gt;,\n    // data dimension index, for example 0 or 1 or 2 ...\n    // Only work in `radar` series.\n    dimensionIndex: number,\n    // Color of data\n    color: string\n}\n</code></pre>\n<p><strong>How to use <code class=\"codespan\">encode</code> and <code class=\"codespan\">dimensionNames</code>?</strong></p>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    source: [\n        [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n        [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n        [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n        [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.encode.y[0]]\n</code></pre>\n<p>When the dataset is like</p>\n<pre><code class=\"lang-ts\">dataset: {\n    dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    source: [\n        {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n        {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n        {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n        {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n    ]\n}\n</code></pre>\n<p>We can get the value of the y-axis via</p>\n<pre><code class=\"lang-ts\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code class=\"codespan\">ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code class=\"codespan\">callback</code> when it is used.</p>\n<p>The third parameter <code class=\"codespan\">callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code class=\"codespan\">ticket</code> and <code class=\"codespan\">htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">formatter: function (params, ticket, callback) {\n    $.get(&#39;detail?name=&#39; + params.name, function (content) {\n        callback(ticket, toHTML(content));\n    });\n    return &#39;Loading&#39;;\n}\n</code></pre>\n"},"tooltip.valueFormatter":{"desc":"<blockquote>\n<p>Since <code class=\"codespan\">v5.3.0</code></p>\n</blockquote>\n<p>Callback function for formatting the value section in tooltip.</p>\n<p>Interface:</p>\n<pre><code class=\"lang-ts\">(value: number | string) =&gt; string\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Add $ prefix\nvalueFormatter: (value) =&gt; &#39;$&#39; + value.toFixed(2)\n</code></pre>\n"},"tooltip.backgroundColor":{"desc":"<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip&#39;s floating layer.</p>\n"},"tooltip.borderColor":{"desc":"\n\n\n\n\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip&#39;s floating layer.</p>\n","uiControl":{"type":"color","default":"#333"}},"tooltip.borderWidth":{"desc":"\n\n\n\n\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip&#39;s floating layer.</p>\n","uiControl":{"type":"number","default":"0","step":"0.5"}},"tooltip.padding":{"desc":"\n\n\n\n\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n\n\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-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"}},"tooltip.textStyle":{"desc":"<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip&#39;s floating layer.</p>\n"},"tooltip.textStyle.color":{"desc":"\n\n<p> text color.</p>\n","uiControl":{"type":"color","default":"'#fff'"}},"tooltip.textStyle.fontStyle":{"desc":"\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,italic,oblique"}},"tooltip.textStyle.fontWeight":{"desc":"\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","uiControl":{"type":"enum","default":"normal","options":"normal,bold,bolder,lighter"}},"tooltip.textStyle.fontFamily":{"desc":"\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n","uiControl":{"type":"enum","default":"sans-serif","options":"sans-serif,serif,monospace,Arial,Courier New"}},"tooltip.textStyle.fontSize":{"desc":"\n\n<p> font size.</p>\n","uiControl":{"type":"number","default":"14","min":"1","step":"1"}},"tooltip.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"}},"tooltip.textStyle.width":{"desc":"\n\n<p>Width of text block.</p>\n","uiControl":{"type":"number","default":"100","min":"1","max":"500","step":"1"}},"tooltip.textStyle.height":{"desc":"\n\n<p>Height of text block.</p>\n","uiControl":{"type":"number","default":"50","min":"1","max":"500","step":"1"}},"tooltip.textStyle.textBorderColor":{"desc":"\n\n<p>Stroke color of the text.</p>\n","uiControl":{"type":"color"}},"tooltip.textStyle.textBorderWidth":{"desc":"\n\n<p>Stroke line width of the text.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"tooltip.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\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</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"}},"tooltip.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"}},"tooltip.textStyle.textShadowColor":{"desc":"\n\n<p>Shadow color of the text itself.</p>\n","uiControl":{"type":"color","default":"#000"}},"tooltip.textStyle.textShadowBlur":{"desc":"\n\n<p>Shadow blue of the text itself.</p>\n","uiControl":{"type":"number","min":"0","step":"0.5"}},"tooltip.textStyle.textShadowOffsetX":{"desc":"\n\n<p>Shadow X offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"tooltip.textStyle.textShadowOffsetY":{"desc":"\n\n<p>Shadow Y offset of the text itself.</p>\n","uiControl":{"type":"number","step":"0.5"}},"tooltip.textStyle.overflow":{"desc":"\n\n<p>Determine how to display the text when it&#39;s overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">&#39;break&#39;</code> Break by word</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> Break by character.</li>\n</ul>\n","uiControl":{"type":"enum","options":"truncate,break,breakAll"}},"tooltip.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\">&#39;truncate&#39;</code> Truncate the overflow lines.</li>\n</ul>\n"},"tooltip.extraCssText":{"desc":"\n\n\n\n\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code class=\"codespan\">&#39;item&#39;</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-ts\">extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39;\n</code></pre>\n","uiControl":{"type":"text"}}}